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