CSS grid-column-start 属性

定義と使用方法

grid-column-start 属性は、プロジェクトがどの列線から始まるかを定義します。

参照してください：

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

CSS リファレンスマニュアル：grid-column 属性

CSS リファレンスマニュアル：grid-column-end 属性

CSS リファレンスマニュアル：grid-row-start 属性

CSS リファレンスマニュアル：grid-row-end 属性

例

"item1" を列 2 から始めるように：

.item1 {
  grid-column-start: 2;
}

自分で試してみる

CSS 文法

grid-column-start: auto|span n|column-line;

属性値

値 説明
auto デフォルト値。プロジェクトは流に配置されます。
span n プロジェクトが横跨する列数を指定します。
column-line プロジェクトがどの列から表示されるかを指定します。

技術的詳細

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

ブラウザのサポート

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

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