CSS grid-template-areas 属性

定義と使用方法

グリッドテンプレートエリア属性でグリッドレイアウト内のエリアを指定します。

使用できます グリッドエリア 属性名をグリッドプロジェクトに設定し、グリッドテンプレートエリア属性でその名前を参照します。

各エリアは波線で定義されています。名前のないグリッドプロジェクトを引用する場合は、点を使用してください。

も参照してください：

CSS 教程：CSS 网格项目

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

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

インスタンス

例 1

名前のプロジェクト "myArea" を5列のグリッドレイアウトで2列にわたって横跨させる：

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

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

例 2

2行を指定し、"item1" が前2行で前2列にわたって横跨ぐように規定します（5列のグリッドレイアウトで）：

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

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

CSS 语法

grid-template-areas: none|itemnames;

属性値

値 説明
none デフォルト値。名前のないグリッドエリア（グリッドエリア）。
itemnames 各列と各行がどのように表示されるべきかを指定するシーケンスを定義します。

技術的詳細

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

ブラウザのサポート

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

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