Број и ширина редова у CSS гридовима

Елементе грида се такође могу позиционирати по редовима. За то служи својство grid-template-rows. Ово својство прима димензије редова раздвојене размацима. У њему се могу користити исте вредности које смо учили и за колоне.

Пример

За пример, хајде да позиционирамо блокове у четири реда:

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

Пример

Поставимо за први и трећи ред фиксну висину у пикселима, а други ред нека заузме преостали простор:

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

Практични задаци

Позиционирајте блокове у три реда. Нека први блок има димензију 100px, други 150px, а трећи 200px.

Нека у вашем гриду буде три реда. Направите да сви имају исту висину.