グリッドのエリアをラインで指定して定義

グリッドのエリアをラインで指定して定義するには、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

サンプルコード

このプロパティはグリッドアイテムに対して指定しますが、指定しなかったグリッドアイテムは自動的に配置されます。

デモ

• 1
• 2
• 3
• 4
• 5
• 6
• 7