備忘録的プログラミングリファレンス

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)

CSS

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

DOM(JavaScript)

値の取得
String = object.style.gridTemplateAreas;
値の設定
object.style.gridTemplateAreas="none | 'grid-area-names'";

値(Values)

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

備考(Remarks)

初期値(Default value)none
継承(Inherited)No
CSS AnimationYes

Example

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