grid-column

レイアウト・配置

グリッドアイテムが占める列の範囲を指定する短縮プロパティです。grid-column-startとgrid-column-endを一括指定。

構文

Syntax
grid-column: <start-line> / <end-line>

コード例

1

grid-column: span 2;
実行結果
1
grid-column: span 2
4
2番目が2列分を占有

2列分の幅を占める

2

grid-column: 1 / 4;
実行結果
1
grid-column: 1 / 4
2番目が列1〜4を占有

1列目から4列目まで

💡 TIPS

-1は最後の列を意味する。spanを使うと相対的な指定ができる。レスポンシブレイアウトで列数を変更しやすい。

⚠️ よくある間違い

終了位置は「その列の手前」を指す。1 / 3は1列目と2列目の2列分。列番号は1から始まる(0ではない)。

関連プロパティ

ブラウザサポート

Chrome 57+, Firefox 52+, Safari 10.1+