Grid エリア
グリッドエリアはグリッド上で一つ以上の グリッドセル からなる長方形の領域です。グリッドエリアは ライン指定による配置 や 名前付きグリッドエリアでエリアを定義すると作成されます。
グリッドエリアはその性質上、必ず長方形の領域となります。例えば T 字型や L 字型のグリッドエリアを作ることはできません。
次の例ではグリッドコンテナに二つのグリッドアイテムを含み、これらに grid-area
(en-US) プロパティで名前を付け、グリッド上に grid-template-areas
を使ってレイアウトしています。これによりグリッドセルと 4 つ含むものと、2 つ含むものの二つのグリッドエリアができます。
.wrapper {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: 100px 100px;
grid-template-areas:
"a a b"
"a a b";
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
<div class="wrapper">
<div class="item1">Item</div>
<div class="item2">Item</div>
</div>
より詳しく
プロパティリファレンス
さらに詳しい説明
- CSS グリッドレイアウトガイド: グリッドレイアウトの基本コンセプト
- CSS グリッドレイアウトガイド: グリッドテンプレートエリア
- CSS グリッドレイアウト仕様に於けるグリッドエリアの定義