Свойство 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,
което задава броя и височината на редовете в неявен грид
