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

grid-template-areasプロパティ

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

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

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

グリッドアイテム名を指定して3連結
.chld_element01 {
	grid-area: exampleArea;
}

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

構文(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