Свойство grid-template-columns
Свойството grid-template-columns задава
броя и ширината на колоните, които
елементът ще заема в грида или мрежата.
Свойството се посочва в родителския елемент
и определя ширината на колоните на дъщерните елементи.
В стойността на свойството посочваме ширината на колоните
в произволни единици
за размери.
При посочване в свойствата на стойности в пиксели
размерите на колоните ще съответстват точно на тях.
Ако зададем думата auto, тогава колоните ще
запълват цялото налично пространство. Използването
на единицата fr (фракция) означава,
че цялото пространство ще бъде разделено
на еднакви части. Предимството на
fr е неговата адаптивност към
различни контейнери или резолюции на екрана,
тъй като fr просто ги разделя на посочения
брой фракции без връзка с точен размер в пиксели.
Синтаксис
селектор {
grid-template-columns: ширина на колоната;
}
Пример
Нека зададем ширина на колоните за нашите елементи в грида:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 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-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
А сега със свойството
grid-template-columns
направим така, че първата и втората
колона да заемат една част от контейнера,
а третата колона - три части:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#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-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
Нека в свойството grid-template-columns
посочим функцията repeat(),
която ще съобщи на контейнера, че всички
три колони трябва да имат еднаква ширина:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
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>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
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>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#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-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#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-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#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-columns: repeat(auto-fill, minmax(150px, 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-columns: repeat(auto-fit, minmax(150px, 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-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 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-rows,
което задава броя и височината на редовете в грида -
свойството
grid-auto-columns,
което задава броя и ширината на колоните в неявен грид
