CSS grid-template-columns 属性

定義と用法

grid-template-columns 属性は、グリッドレイアウト内の列数（および幅）を指定します。

これらの値は、スペースで区切られたリストで、各値は対応する列のサイズを指定します。

他にも参照してください：

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

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

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

例

例1

4つの列のグリッドコンテナを作成します：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

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

例2

4つの列のグリッドレイアウトを作成し、各列のサイズを指定します：

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

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

CSS 文法

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

属性値

値 説明
none デフォルト値。必要に応じて列を作成します。
auto 列のサイズは、コンテナのサイズと列の中のアイテムの内容のサイズに依存します。
max-content 各列のサイズは、列の中で最も大きなアイテムに基づいて設定されます。
min-content 各列のサイズは、列の中で最も小さいアイテムに基づいて設定されます。
length 列のサイズを設定します。合法な長さ値を使用して参照してください長さ単位。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性は親要素から継承されます。参照してください inherit。

技術的詳細

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

ブラウザのサポート

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

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