CSSグリッドにおける行の数と幅

グリッド要素は行ごとに配置することもできます。このために用意されているのがプロパティ grid-template-rowsです。このプロパティは、スペース区切りで行のサイズを受け取ります。列の学習で使ったのと同じ値を適用することができます。

例

例として、ブロックを4つの行に配置してみましょう：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 50px 100px 50px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

1行目と3行目にはピクセル単位の固定幅を指定し、 2行目には残りのスペースを占有させます：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 100px auto 60px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

行のサイズ指定に関数 repeat を使用します：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

行の高さを 50px に設定し、行の数は auto-fill を使って自動的に設定します：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(auto-fill, 50px);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

実践タスク

ブロックを3行に配置してください。最初のブロックのサイズを 100px、 2番目を 150px、 3番目を 200px にします。

グリッドを3行にします。各行が同じ幅になるようにしてください。