グリッドレイアウトのトラックを名前を付けて定義

トラックを名前を付けて定義するには、grid-template-areasプロパティを使用します。
また、定義した名前をグリッドアイテムに割り当てるには、grid-areaプロパティを使用します。

構文

							grid-template-areas:"エリア名";
							grid-area:エリア名;
						

指定値

値名	初期値	説明
エリア名 必須	none	エリアの名前。ダブルクォーテーション内でスペースで区切ることで列を、ダブルクォーテーション間でスペースあるいは改行で区切ることで行を定義できる。 設定可能値： none ... なし . ... 無名 任意の文字列 ... 指定した名前

サンプルコード

デモ

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