Ridade arv ja laius CSS grid'ides

Gridi elemente saab paigutada ka ridade kaupa. Selleks on mõeldud omadus grid-template-rows. See omadus võtab tühikuga eraldatuna ridade suurused. Selles saab kasutada samad väärtused, mida me õppisime ka veergude jaoks.

Näide

Näitena paigutame plokid nelja rea sisse:

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

Näide

Määrame esimesele ja kolmandale reale fikseeritud laiuse pikslites, ja teine rida võtku järelejäänud koha:

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

Näide

Kasutame funktsiooni repeat ridade suuruste määramiseks:

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

Näide

Määrame ridadele kõrguseks 50px, ja ridade arvu määrame automaatselt kasutades väärtust 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;
}

Praktilised ülesanded

Paigutage plokid kolme rea sisse. Esimese ploki suurus olgu 100px, teine 150px, ja kolmas 200px.

Olgu teie grid'is kolm rida. Tehke nii, et neil oleks ühesugune laius.