grid-areaプロパティ
grid-areaプロパティは、display:grid;によるエレメント（グリッドコンテナ）の子エレメント（グリッドアイテム）の配置と区割りを指定するプロパティです。 grid-areaプロパティはグリッドアイテム（子エレメント）に指定します。グリッドアイテムの名称を指定することや、その表示位置と区割りを指定することができます。
grid-areaプロパティによって指定した名称は、grid-template-areasプロパティによって連結することができます。
.chld_element01 {
grid-area: exampleArea;
}
.grid_container{
display: grid;
grid-template-areas: 'exampleArea exampleArea exampleArea';
}
grid-areaプロパティによって、表示位置とサイズを指定する場合は以下のプロパティを一括して指定できます。
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 Animation | Yes |