グリッドのエリアをラインで指定して定義
グリッドのエリアをラインで指定して定義するには、grid-area
プロパティを使用します。
このgrid-area
は グリッドレイアウトの名前を付けてグリッドを定義 でも使用されます。
- ※ グリッドエリアおよびグリッドラインについては、グリッドレイアウトの基本ページをご覧ください。
構文
grid-area:行の開始;
またはgrid-area:行の開始 / 列の開始;
またはgrid-area:行の開始 / 列の開始 / 行の終了;
またはgrid-area:行の開始 / 列の開始 / 行の終了 / 列の終了;
指定値
値名 | 初期値 | 説明 | サブプロパティ |
---|---|---|---|
行の開始 必須 |
auto | 行の開始する位置 | grid-row-start |
列の開始 | auto | 列の開始する位置 | grid-column-start |
行の終了 | auto | 行の終了する位置 | grid-row-end |
列の終了 | auto | 列の終了する位置 | grid-column-end |
サンプルコード
CSS
このプロパティはグリッドアイテムに対して指定しますが、指定しなかったグリッドアイテムは自動的に配置されます。
デモ
- 1
- 2
- 3
- 4
- 5
- 6
- 7