Својството grid-template-rows
Својството grid-template-rows го одредува
бројот и ширината на редовите кои
ќе ги зафати елементот во гридот или мрежата.
Во вредноста на својството ја наведуваме ширината на редовите
во какви било единици
за димензии.
Својството се наведува во елементот-родител
и ја одредува ширината на редовите на елементите-потомци.
При наведување на вредности во пиксели во својствата
димензиите на редовите точно ќе им одговараат.
Ако го зададеме зборот auto, тогаш редовите ќе
го пополнат целиот достапен простор. Користењето
на единицата fr (фракција) значи
deka целиот простор ќе се подели
на еднакви делови. Предноста на
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
можe да имаат дробна форма. Ајде
да го измениме претходниот пример, наведувајќи
за вториот и третиот ред ширина
во дробни броеви:
<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,
кое го одредува бројот и ширината на редовите во имплицитниот грид
