Својство grid-template-rows
Својство grid-template-rows дефинише
број и ширину редова које
ће елемент заузимати у гриду или мрежи.
У вредности својства наводимо ширину редова
у било којој јединици
за димензије.
Својство се наводи у елементу-родитељу
и одређује ширину редова елемената-потомака.
Приликом навођења вредности у пикселима у својствима,
димензије редова ће им тачно одговарати.
Ако наведемо реч auto, редови ће
заузимати цео доступни простор. Коришћење
јединице fr (фракција) значи,
да ће цео простор бити подељен
на једнаке делове. Предност
fr је његова адаптивност на
различите контејнере или резолуције екрана,
јер fr једноставно дели простор на наведени
број фракција без везе за тачну димензију у пикселима.
Синтакса
селектор {
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: 400px;
}
#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: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
А сада помоћу својства
grid-template-rows
урадимо да први и други
ред заузму један део контејнера,
а трећи ред – три дела:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
Вредности, наведене у јединицама fr
могу бити разломљене. Изменимо
претходни пример, наводећи
за други и трећи ред ширину
у разломцима:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
Дефинишимо у својству grid-template-rows
функцију 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: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
А сада изменимо претходни пример тако да се трима једнаким редовима додаје четврти, који ће заузмати две фракције контејнера:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
Дефинишимо прва два реда ширину у једну фракцију контејнера, а последња два реда – у две фракције:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
А сада дефинишимо ширину редовима
комбинујући вредности, наведене помоћу
функције repeat() и слободних јединица fr:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
Такође у функцији repeat() можемо навести
вредност 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;
}
:
Пример
Веома је згодно заједно са auto-fill
навести функцију minmax,
која дефинише опсег ширине редова
од минималне до максималне вредности.
Ако ширина контејнера не може да прими све
редове, онда ће неки од њих бити премештени
у нови ред, при чему ће се редови у реду
равномерно распоредити. Изменимо
претходни пример, наводећи у њему функцију minmax:
<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, minmax(50px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
Сада дефинишимо својство auto-fit,
чија се разлика од 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-fit, minmax(100px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
Такође уз fr можемо
користити вредности у %, које такође дефинишу
који део контејнера ће ред заузимати.
При томе ће се прво израчунати димензија
реда у %, а преостали слободни простор
биће подељен на фракције:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
Користимо заједно својства
grid-template-columns и
grid-template-rows:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
Користећи својства
grid-template-columns и
grid-template-rows
направимо табелу од девет ћелија, распоређених
у три реда. Притом други и трећи ред ће имати исту ширину,
а свака колона – различиту ширину:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
А сада у табели из претходног примера направимо горњи ред ширине у две фракције, а прву колону – у половину фракције:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Погледајте такође
-
својство
grid-template-columns,
које дефинише број и ширину колона у гриду -
својство
grid-auto-rows,
које дефинише број и ширину редова у имплицитном гриду
