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

grid-areaプロパティ

 grid-areaプロパティは、display:grid;によるエレメント(グリッドコンテナ)の子エレメント(グリッドアイテム)の配置と区割りを指定するプロパティです。 grid-areaプロパティはグリッドアイテム(子エレメント)に指定します。グリッドアイテムの名称を指定することや、その表示位置と区割りを指定することができます。

 grid-areaプロパティによって指定した名称は、grid-template-areasプロパティによって連結することができます。

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

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

 grid-areaプロパティによって、表示位置とサイズを指定する場合は以下のプロパティを一括して指定できます。

表示位置を上から2番目、左から2番めで、行方向に2、列方向に3連結
grid-area: 2 / 2 / span 2 / span 3;

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