Število in širina vrstic v CSS mrežah

Elemente mreže lahko tudi razporedimo po vrsticah. Za to je namenjena lastnost grid-template-rows. Ta lastnost sprejme prek presledka velikosti vrstic. V njej lahko uporabimo iste vrednosti, ki smo jih preučevali tudi za stolpce.

Primer

Za primer postavimo bloke v štiri vrstice:

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

Primer

Nastavimo za prvo in tretjo vrstico fiksno širino v slikovnih pikah, prva vrstica naj zasede preostali prostor:

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

Primer

Uporabimo funkcijo repeat za določanje velikosti vrstic:

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

Primer

Dodelimo vrsticam višino 50px, število vrstic pa nastavimo avtomatično z uporabo vrednosti 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;
}

Praktične naloge

Razporedite bloke v tri vrstice. Prvi blok naj bo velikosti 100px, drugi 150px, tretji pa 200px.

Naj bo v vaši mreži tri vrstice. Poskrbite, da bodo imele enako širino.