CSSgrid -template-areasプロパティ

例

名前付きアイテム「myArea」を5列のグリッドレイアウトの2列にまたがるようにします。

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

定義と使用法

grid-template-areasプロパティは、グリッドレイアウト内の領域を指定します。

grid-area プロパティを使用してグリッド項目に名前を付けてから、grid-template-areas プロパティ内の名前を参照できます。

各領域はアポストロフィで定義されます。ピリオド記号を使用して、名前のないグリッドアイテムを参照します。

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

ブラウザのサポート

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

Property
grid-template-areas	57	16	52	10	44

CSS構文

grid-template-areas: none|itemnames;

プロパティ値

Value	Description	Play it
none	Default value. No named grid areas
itemnames	A sequence that specifies how each columns and row should display

その他の例

例

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

.item1 {
grid-area: myArea;
}
.grid-container {
  display: grid;
grid-template-areas:
    '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-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

CSSリファレンス

CSS Properties