grid-column
は CSS のプロパティで、 grid-column-start
および grid-column-end
の一括指定プロパティであり、グリッド列の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用されることで、グリッド領域の行の開始と終了の端を指定します。
構文
このプロパティは一つまたは二つの <grid-line>
の値で指定します。
二つの <grid-line>
値を指定する場合は、 "/" で区切ります。個別指定の grid-column-start
はスラッシュの前に設定し、個別指定の grid-column-end
はスラッシュの後に設定します。
それぞれの <grid-line>
の値は以下の何れかを指定できます。
auto
キーワード<custom-ident>
値<integer>
値<custom-ident>
および<integer>
を空白で区切ったものspan
キーワードと<custom-ident>
または<integer>
またはその両方。
値
auto
- プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の
1
とするためのキーワードです。 <custom-ident>
- '<custom-ident>-start'/'<custom-ident>-end' という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。
メモ: 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、
grid-column: foo;
と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前にfoo-start
/foo-end
という名前の線が明示的に存在しない限り)。そうでなければ、これは
<custom-ident>
に沿って整数の1
が指定されたものとして扱われます。 <integer> && <custom-ident>?
- n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。
名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。
0
のinteger
値は無効です。 span && [ <integer> || <custom-ident> ]
- グリッドアイテムのグリッド領域の列開始の端が終了の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。
名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分にない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。
the <integer> が省略された場合の既定値は
1
です。負の数や0は無効です。
形式文法
<grid-line> [ / <grid-line> ]?where
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
例
HTML
<div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div>
CSS
#grid { display: grid; height: 100px; grid-template-columns: repeat(6, 1fr); grid-template-rows: 100px; } #item1 { background-color: lime; } #item2 { background-color: yellow; grid-column: 2 / 4; } #item3 { background-color: blue; grid-column: span 2 / 7; }
Internet Explorer での問題
IE11 はグリッドアイテムの自動配置に対応していません。すべてのアイテムは、明示的に -ms-
grid-column
および -ms-
grid-row
を記述しない限り、最初の行・列に配置されます。小さな JavaScript を用いて自動的な配置をすることもできます。 ソースリポジトリ
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Grid Layout grid-column の定義 |
勧告候補 | 初回定義 |
初期値 | 一括指定の各プロパティとして
|
---|---|
適用対象 | grid items and absolutely-positioned boxes whose containing block is a grid container |
継承 | なし |
メディア | 視覚 |
計算値 | 一括指定の各プロパティとして
|
アニメーションの種類 | 個別 |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
ブラウザーの互換性
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
grid-column | Chrome
完全対応
57
| Edge 完全対応 16 | Firefox
完全対応
52
| IE 未対応 なし | Opera
完全対応
44
| Safari 完全対応 10.1 | WebView Android
完全対応
57
| Chrome Android
完全対応
57
| Firefox Android
完全対応
52
| Opera Android
完全対応
43
| Safari iOS 完全対応 10.3 | Samsung Internet Android 完全対応 6.0 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
関連情報
- 関連する CSS プロパティ:
grid-row
,grid-row-start
,grid-row-end
,grid-column-start
,grid-column-end
- グリッドレイアウトガイド: CSS グリッドでの行ベースの配置
- 動画チュートリアル: 行ベースの配置