Својството 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,
кое го одредува бројот и ширината на колоните во имплицитниот грид
