A sorok számának és szélességének beállítása CSS grid-ben

A grid elemek sorokba is elhelyezhetők. Erre szolgál a grid-template-rows tulajdonság. Ez a tulajdonság a sorok méreteit fogadja el szóközzel elválasztva. Ugyanazokat az értékeket használhatjuk itt, amelyeket az oszlopoknál tanultunk.

Példa

Példaként helyezzük el a blokkokat négy sorba:

<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élda

Állítsuk be az első és harmadik sor számára rögzített szélességet pixelben, a második sor pedig foglalja el a maradék helyet:

<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élda

Használjuk a repeat függvényt a sorok méreteinek megadásához:

<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élda

Állítsuk be a sorok magasságát 50px-re, a sorok számát pedig állítsuk be automatikusan a auto-fill érték segítségével:

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

Gyakorlati feladatok

Helyezze el a blokkokat három sorba. Az első blokk mérete legyen 100px, a másodiké 150px, a harmadiké pedig 200px.

Tegyük fel, hogy a gridjében három sor van. Állítsa be, hogy egyforma szélességűek legyenek.