grid-template-areas プロパティ

　grid-template-areas プロパティは、display:grid;によるエレメント（グリッドコンテナ）の子エレメント（グリッドアイテム）の配置や連結を指定するプロパティです。

　先にグリッドアイテムごとにgrid-areaプロパティで領域名を定義しておく必要があります。

　grid-template-areas プロパティの値として領域名を並べることで、グリッドアイテムをレイアウトできます。値はアポストロフィ"'"で囲みます。名前のないグリッドアイテムはピリオド"."で表します。

グリッドアイテム名を指定して3連結（Exampleを参照）

.chld_element01 {
	grid-area: exampleArea;
}

.grid_container{
	display: grid;
	grid-template-areas: 'exampleArea exampleArea exampleArea';
}

　以下は関連するプロパティです。


display:grid;	並びを設定することができるdisplayプロパティ
grid-area	グリッドアイテムに名称を指定
grid-auto-columns	グリッドアイテムの幅
grid-auto-flow	グリッドコンテナの領域を自動的に拡張
grid-auto-rows	全てのグリッドアイテムの高さ
grid-column	グリッドアイテムの列単位の位置と連結数
grid-column-end	列単位の位置や連結数
grid-column-gap	列同士のギャップ幅
grid-column-start	列単位（横）の位置や連結数
grid-gap	グリッドアイテムどうしのギャップのサイズ
grid-row	行単位の位置と連結数
grid-row-end	行単位の位置や連結数
grid-row-gap	行同士のギャップ幅
grid-row-start	行単位の位置や連結
grid-template	グリッドアイテムの並び数やサイズ
grid-template-columns	グリッドアイテムの列の並び数、幅
grid-template-rows	グリッドアイテムの行の並び数と高さ

構文(Syntax)

grid-template-areas: none | 'grid-area-names';

値の取得

String = object.style.gridTemplateAreas;

値の設定

object.style.gridTemplateAreas="none | 'grid-area-names'";

Value	摘要
none	初期値（default値）
grid-area-names	領域名によってグリッドアイテムをレイアウト

　grid-template-areasの例です。横並びに３つ分のエレメントを指定すると、以下は指定しなくても横に３つ分で並ぶようです。
　ここでは"contents06"〜"contents08"のエレメントを定義していないために表示されません。

HTML内容

CSS内容