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

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

構文

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

指定値

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

サンプルコード

CSS

デモ

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

CSS3逆引きリファレンス一覧へ戻る