CSS grid-column 属性

定義と使用法

grid-column 属性は、グリッドプロジェクトのサイズとグリッドレイアウト内の位置を定義し、以下の属性のショートカット属性です：

も参照してください：

CSS チュートリアル：CSS グリッドレイアウト

例

例 1

「item1」を列 1 から始めて、2 列を横跨させる：

.item1 {
  grid-column: 1 / span 2;
}

自分で試してみてください

例 2

列線の値を使用して、横跨する列数を指定できます：

.item1 {
  grid-column: 1 / 3;
}

自分で試してみてください

CSS 文法

grid-column: grid-column-start / grid-column-end;

属性値

値 説明
grid-column-start プロジェクトを表示開始する列を指定します。
grid-column-end どの列線（column-line）上でプロジェクトの表示を停止させるか、または何列を越えるかを指定します。

技術的詳細

デフォルト値： auto / auto
継承： いいえ
アニメーション作成： サポート。参照してください：アニメーション関連属性。
バージョン： CSS Grid Layout Module Level 1
JavaScript 文法： object.style.gridColumn="2 / span 2"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44