CSS grid-template 属性

定義と用法

grid-template 属性は以下の属性の短縮形です：

も参照してください：

CSS 教程：CSS 网格项目

CSS 参考マニュアル：grid-area 属性

CSS 参考マニュアル：grid-template-rows 属性

CSS 参考マニュアル：grid-template-columns 属性

CSS 参考マニュアル：grid-template-areas 属性

例

例1

150ピクセル高の3列グリッドレイアウトを作成します：

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

実際に試してみてください

例 2

2行を規定し、"item1" が最初の2行の最初の2列を横跨います（5列のグリッドレイアウトの中で）：

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template:
    'myArea myArea ...'
    'myArea myArea ...';
}

実際に試してみてください

例 3

すべてのプロジェクトに名前をつけて、既成のウェブテンプレートを作成します：

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

実際に試してみてください

CSS 文法

grid-template: none|grid-template-rows / grid-template-columns|グリッドテンプレートエリア|initial|inherit;
属性値
値 説明
none デフォルト値。列や行のサイズを規定しません。
grid-template-rows / grid-template-columns 列と行のサイズを規定します。
グリッドテンプレートエリア ネーミングプロジェクトを使用するグリッドレイアウトを規定します。
initial この属性をデフォルト値に設定します。参照してください。 initial。
inherit この属性は親要素から継承されます。参照してください。 inherit。

技術的詳細

デフォルト値： none none none
継承： いいえ
アニメーション制作： サポートされています。参照してください：アニメーション関連属性。
バージョン： CSS グリッドレイアウトモジュール レベル 1
JavaScript 文法： object.style.gridTemplate = "250px / auto auto"

ブラウザのサポート

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

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