CSSグリッド列プロパティ
例
「item1」を列1から開始し、2列にまたがるようにします。
.item1 {
grid-column: 1 / span 2;
}
定義と使用法
このgrid-column
プロパティは、グリッドレイアウトでのグリッドアイテムのサイズと位置を指定し、次のプロパティの省略形のプロパティです。
デフォルト値: | 車/車 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | はい。アニメート可能について読む |
バージョン: | CSSグリッドレイアウトモジュールレベル1 |
JavaScript構文: | オブジェクト.style.gridColumn = "2 /スパン2" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
grid-column | 57 | 16 | 52 | 10 | 44 |
CSS構文
grid-column: grid-column-start /
grid-column-end;
プロパティ値
Value | Description |
---|---|
grid-column-start | Specifies on which column to start displaying the item. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
その他の例
例
スパンする列の数の代わりに列行の値を使用できます。
.item1 {
grid-column: 1 / 3;
}
関連ページ
CSSチュートリアル:CSSグリッドレイアウト