CSS3: grid-area プロパティ - グリッド領域の一括指定

■ 概要

項  目説  明
記述形式 セレクタ {grid-area: }
値 の形式
  1. grid-row-start / grid-column-start / grid-row-end / grid-column-end
  2. grid-row-start / grid-column-start / grid-row-end
  3. grid-row-start / grid-column-start
  4. grid-row-start
初 期 値 各プロパティの初期値
対応ブラウザー C?+ / e?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 グリッド・コンテナ
継  承 各プロパティを参照

■ 解説

grid-area プロパティ は,グリッド領域の一括指定 をします。

grid-row-startgrid-column-startgrid-row-endgrid-column-end の4つのプロパティをまとめて指定することが可能です。 これら4つのプロパティそれぞれの詳細については,各プロパティの説明を参照してください。

ただし,grid-row-start プロパティは省略できません。

複数のプロパティを指定するときには,プロパティの後に " / " をはさんで続けて書きます。

説  明
grid-column-end 上の 2 のように,この値を省略した場合,grid-column-start の値が,ID名 のときはそれと同じ値となり,それ以外のときは auto になります。
grid-row-end 上の 3 のように,この値を省略した場合,grid-row-start の値が,ID名 のときはそれと同じ値となり,それ以外のときは auto になります。
grid-column-start 上の 4 のように,この値を省略した場合,grid-row-start の値が,ID名 のときは4つのプロパティは全てそれと同じ値となり,それ以外のときはこのプロパティの値は auto になります。
grid-row-start 上の 1 ~ 4 のように,このプロパティは省略できません。
備  考 これらの4つのプロパティは,グリッド・コンテナの子要素配置のパラメーター,すなわち,グリッド領域内子要素の ブロック開始端(block-startインライン開始端(inline-startブロック終了端(block-endインライン終了端(inline-end を指定するプロパティです。

■ 使用例( grid プロパティの利用)

現在準備中です。

■ 備考

【参考ページ】