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

grid-area プロパティ

 grid-area プロパティは、グリッドコンテナにおいての子エレメント(グリッドアイテム)の配置と区割りを指定するプロパティです。グリッドコンテナとは、display:grid;を設定したエレメントのことです。
 grid-area プロパティは、グリッドアイテム(子エレメント)に指定します。

 方法は2つあります。ひとつは、グリッドアイテムに名称を指定し、その名称を元に grid-template-areas で表示位置と区割りを指定することです。

グリッドアイテムに名称を指定して3連結

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

.chld_element01 {
	grid-area: exampleArea;
}
詳しくは「Example」を参照してください。

 もうひとつは、grid-area プロパティに配置と区割りを直接指定する方法です。この場合は、以下のプロパティを一括して指定できます。

表示位置を上から2番目、左から2番めで、行方向に2、列方向に3連結
grid-area: 2 / 2 / span 2 / span 3;
詳しくは「Example」を参照してください。

ページ内 Index

構文(Syntax)

CSS

grid-area: grid-area-names | [ grid-row-start / grid-column-start / grid-row-end / grid-column-end ];

DOM(JavaScript)

値の取得
?String = object.style.gridArea;?
値の設定
object.style.gridArea=" grid-area-names | [ grid-row-start / grid-column-start / grid-row-end / grid-column-end ]";

値(Values)

Value摘要
grid-area-names領域名を定義
grid-row-start行(縦)方向の表示位置か、行(縦)方向への連結数
grid-column-start列(横)方向の表示位置か、列(横)方向への連結数
grid-row-end行(縦)方向の指定位置の1つ前に表示するか、行(縦)方向への連結数
grid-column-end列(横)方向の指定位置の1つ前に表示するか、列(横)方向への連結数

備考(Remarks)

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

Example

 grid-area の例です。grid-area に名称を指定し、 grid-template-areas で表示位置と区割りを指定する方法と、grid-area に直接指定する方法を紹介します。

grid-area に名称を指定

 以下は、grid-area に名称を指定し、 grid-template-areas で表示位置と区割りを指定する方法です。
 グリッドアイテム contents01 を横に3つ連結しています。

grid-area に直接指定

 以下は、grid-area プロパティに配置と区割りを直接指定する方法です。
 グリッドアイテム contents01 を右から上から2番め、2番めに配置し、縦に2つ、横に2つ連結しています。