★CSSリファレンス

grid …… グリッドについてまとめて指定する

gridプロパティは、グリッドについてまとめて指定する際に使用します。

gridプロパティで指定できるのは、
明示的なグリッドに関する
grid-template-rows・
grid-template-columns・
grid-template-areasプロパティの値、
または、暗黙的なグリッドに関する
grid-auto-rows,
grid-auto-columns,
grid-auto-flowプロパティの値です。

上記プロパティのすべての値を1つのgridプロパティの宣言で指定できるのではなく、
1つのgridプロパティ宣言では、明示的なグリッドに関するプロパティの値のみ、または、暗黙的なグリッドに関するプロパティの値のみが指定できます。

■値

■初期値・適用対象・値の継承

■使用例

div.sample {
	display: grid;
	grid: 80px 100px 40px / 50px 100px 40px;
}

div.sample div {
	margin:4px; border-radius:4px;
	background-color:#66cc99;
}

<div class="sample">
<div>一</div>
<div>ニ</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
<div>七</div>
<div>八</div>
<div>九</div>
<div>十</div>
</div>