CSS grid-area 属性

定義と使用法

grid-area 属性グリッドアイテムのサイズおよびグリッドレイアウト内の位置を定義し、以下の属性の短縮形式です：

grid-area 属性は、グリッドアイテムに名前を割り当てるために使用できます。それから、グリッドコンテナの grid-template-areas 属性参照を使用してグリッドプロジェクトを名前付けることができます。以下の例を参照してください。

も参照してください：

CSS 教程：CSS グリッドレイアウト

例

例 1

"item1" を行 2 列 1 から始め、2行3列にわたって横跨ます：

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

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

ヒント：以下の例を参照してください。

CSS 文法

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

属性値

値 説明
grid-row-start プロジェクトの表示を開始する行を指定します。
grid-column-start プロジェクトの表示を開始する列を指定します。
grid-row-end プロジェクトがどの行線で表示を停止するか、または何行を跨ぐかを指定します。
grid-column-end プロジェクトがどの列線で表示を停止するか、または何列を跨ぐかを指定します。
itemname グリッドプロジェクトのプロジェクトを指定します。

技術的詳細

デフォルト値： auto / auto / auto / auto
継承： いいえ
アニメーション制作： サポートされています。参照してください：アニメーション関連属性。
バージョン： CSS Grid Layout Module Level 1
JavaScript 文法： object.style.gridArea="1 / 2 / span 2 / span 3"

さらに多くの例

例 2

Item1 は「myArea」と命名され、5列のグリッドレイアウトで全5列にわたって横跨ぎます：

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

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

例 3

"myArea" を5列のグリッドレイアウトで2列にわたって横跨けるようにします（点は名前のないプロジェクトを示します）：

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

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

例 4

"item1" を2列と2行にわたって横跨けるようにします：

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

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

例 5

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

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

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

ブラウザのサポート

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

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