CSSグリッドテンプレートプロパティ

例

最初の行の高さが150ピクセルの3列のグリッドレイアウトを作成します。

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

定義と使用法

このgrid-templateプロパティは、次のプロパティの省略形のプロパティです。

デフォルト値：	なしなしなし
遺伝性の：	いいえ
アニメート可能：	はい。アニメート可能について読む
バージョン：	CSSグリッドレイアウトモジュールレベル1
JavaScript構文：	object .style.gridTemplate = "250px / auto auto"

ブラウザのサポート

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

Property
grid-template	57	16	52	10	44

CSS構文

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;

プロパティ値

Value	Description	Play it
none	Default value. No specific sizing of the columns or rows
grid-template rows / grid-template-columns	Specifies the size(s) of the columns and rows
grid-template-areas	Specifies the grid layout using named items
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

その他の例

例

2行を指定します。ここで、「item1」は最初の2行の最初の2列にまたがっています（5列のグリッドレイアウト）。

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

例

すべてのアイテムに名前を付け、すぐに使用できるWebページテンプレートを作成します。

.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 footer';
}

CSSリファレンス

CSS Properties