Počet a šířka řádků v CSS gridu

Prvky gridu lze také umístit do řádků. K tomu slouží vlastnost grid-template-rows. Tato vlastnost přijímá mezery oddělené velikosti řádků. Lze v ní použít stejné hodnoty, které jsme studovali i pro sloupce.

Příklad

Jako příklad umístěme bloky do čtyř řádků:

<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;
}

Příklad

Nastavme pro první a třetí řádek pevnou šířku v pixelech, a druhý řádek ať zabere zbývající místo:

<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;
}

Příklad

Použijme funkci repeat pro určení velikostí řádků:

<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;
}

Příklad

Nastavme řádkům výšku 50px, a počet řádků nastavme automaticky pomocí hodnoty 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;
}

Praktické úlohy

Umístěte bloky do tří řádků. Nechť první blok má velikost 100px, druhý 150px, a třetí 200px.

Nechť ve vašem gridu jsou tři řádky. Zařiďte, aby měly stejnou šířku.