Број и ширина редова у 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.
Нека у вашем гриду буде три реда. Направите да сви имају исту висину.