| 属性名 | grid-area |
|---|---|
| 値 | <grid-line> [ / <grid-line> ]{0,3} |
| 初期値 | auto |
| 適用可能要素 | グリッドアイテム |
| 継承 | 継承しない |
| サポート | https://caniuse.com/mdn-css_properties_grid-area |
グリッドのアイテムに指定して、どの位置に表示するかを指示します。grid や grid-template-areas で定義したエリア名を指定するか、もしくは、グリッド線の開始位置・終了位置を指定します。
grid-row-start、grid-column-start、grid-row-end、grid-column-end をまとめて指定します。grid-column-end を省略した場合、grid-column-start が <custom-ident> の場合はその値、さもなくば auto が設定されます。grid-row-end を省略した場合、grid-row-start が <custom-ident> の場合はその値、さもなくば auto が設定されます。grid-column-start を省略した場合、grid-row-start が <custom-ident> の場合はその値、さもなくば auto が設定されます。
グリッドに関する詳細は「とほほのGrid入門」を参照してください。
エリア名を指定する場合か下記の様に用います。
.header {
grid-area: header;
}
縦の開始線・横の開始線・縦の終了線・横の終了線を指定する方法もあります。下記はいずれも同じ意味になります。
.grid-item-1 {
grid-area: 1 / 2 / 3 / 4;
}
.grid-item-2 {
grid-rows: 1 / 3;
grid-columns: 2 / 4;
}
.grid-item-3 {
grid-row-start: 1;
grid-column-end: 2;
grid-row-end: 3;
grid-column-end: 4;
}