| 属性名 | grid-area |
|---|---|
| 値 | <grid-row-start> [ / <grid-column-start> [ / <grid-row-end> [ / <grid-column-end> ]? ]? ]? |
| 初期値 | auto |
| 適用可能要素 | グリッドアイテム |
| 継承 | 継承しない |
| CSS | IE | Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|---|
| CSS3 | × | 16 | 52 | 57 | 44 | 10.1 |
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-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;
}