CSS3

：

プロパティ

：

grid-area

　編集：2022.07.14 by T.A.

格子アイテムの配置と占有エリア：略式プロパティ。

名前	`grid-area`
値	<grid-line> [`/` <grid-line>]{0,3}
初期値	auto
適用対象	格子アイテム、および［絶対的に位置されたボックスのうち、その包含ブロックは格子コンテナであるもの］
継承	されない
百分率	受容しない
算出値	個々のプロパティを見よ
正準的順序	文法に従う
アニメーション型	離散的

grid-area プロパティは、［grid-row-start、grid-column-start、grid-row-end、grid-column-end］用の略式である。

<grid-line> ⤴

4 個の <grid-line> 値は、順に［grid-row-start、grid-column-start、grid-row-end、grid-column-end］の値を設定する。ただし、指定された値の個数が：

1 個ならば、grid-column-start は［1 個目の値は <custom-ident> ならばそれ／他の場合は auto］に設定される。
2 個ならば、grid-row-end は［1 個目の値は <custom-ident> ならばそれ／他の場合は auto］に設定される。
3 個ならば、grid-column-end は grid-column-start に設定される値と同じ値に設定される。

注記：この略式プロパティの各成分値は、row-start から順に、左横書きのページでは時計回りに†、右横書きのページでは反時計回りに 4 辺を指定することになる。【†原文の“CCW”（counterclockwise）は“CW”（clockwise）の誤りと見られる。】

<DIV style="border:1px solid black; width:200px; height:150px;
 display:grid;
 grid-template:'a b c' 50px 
	'd e f' 70px/40px 60px 80px;
">
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="grid-area:a; border:1px solid red;">2</DIV>
 <DIV style="grid-area:b; border:1px solid red;">3</DIV>
 <DIV style="grid-area:auto; border:1px solid red;">4</DIV>
 <DIV style="grid-area:e/e/f/f; border:1px solid red;">5</DIV>
</DIV>

例

span指定なし：

<DIV style="display:grid; grid-template:50px 100px/70px 100px 150px; border:1px solid black">
 <DIV style="grid-area:1/2; border:1px solid red">１</DIV>
 <DIV style="grid-area:1/3; border:1px solid red">２</DIV>
 <DIV style="grid-area:2/1; border:1px solid red">３</DIV>
 <DIV style="grid-area:2/2; border:1px solid red">４</DIV>
</DIV>

１

２

３

４

span指定あり：

<DIV style="display:grid; grid-template:50px 100px/70px 100px 150px; border:1px solid black">
 <DIV style="grid-area:1/span 2; border:1px solid red">１</DIV>
 <DIV style="grid-area:1/3; border:1px solid red">２</DIV>
 <DIV style="grid-area:2/1; border:1px solid red">３</DIV>
 <DIV style="grid-area:2/SPAN 2; border:1px solid red">４</DIV>
</DIV>

１

２

３

４

テスト

ここに表示

スクリプト：

スクリプト：

表示内容：