Lastnost grid-template-columns
Lastnost grid-template-columns določa
število in širino stolpcev, ki
jih bo element zasedel v mreži.
Lastnost je navedena v starševskem elementu
in določa širino stolpcev podrejenih elementov.
V vrednosti lastnosti podamo širino stolpcev
v poljubnih enotah
za velikosti.
Pri navedbi vrednosti v lastnostih v slikovnih pikah
bo velikost stolpcev natančno ustrezala jim.
Če podamo besedo auto, bodo stolpci
zapolnili ves razpoložljivi prostor. Uporaba
enote fr (frakcija) pomeni,
da bo ves prostor razdeljen
na enake dele. Prednost
fr je njegova prilagodljivost
različnim vsebnikom ali ločljivostim zaslona,
saj fr preprosto razdeli prostor na navedeno
število frakcij brez povezave z natančno velikostjo v slikovnih pikah.
Sintaksa
selektor {
grid-template-columns: širina stolpca;
}
Primer
Določimo širino stolpcev za naše elemente v mreži:
<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;
}
:
Primer
Prvemu in tretjemu stolpcu določimo fiksno širino v slikovnih pikah, drugi stolpec pa naj samodejno zapolni razpoložljivi prostor:
<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;
}
:
Primer
Zdaj pa z lastnostjo
grid-template-columns
poskrbimo, da bosta prvi in drugi
stolpec zasedla en del vsebnika,
tretji stolpec pa tri dele:
<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;
}
:
Primer
Vrednosti, navedene v enotah fr
lahko zavzamejo ulomljeno obliko. Spremenimo
prejšnji primer tako, da za drugi in tretji stolpec podamo širino
v ulomkih:
<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;
}
:
Primer
V lastnosti grid-template-columns
uporabimo funkcijo repeat(),
ki sporoči vsebniku, da morajo vsi
trije stolpci imeti enako širino:
<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;
}
:
Primer
Zdaj pa spremenimo prejšnji primer tako, da se trem enakim stolpcem doda četrti, ki bo zasedel dve frakciji vsebnika:
<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;
}
:
Primer
Prvima dvema stolpcema določimo širino ene frakcije vsebnika, zadnjima dvema stolpcema pa dve frakciji:
<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;
}
:
Primer
Zdaj pa določimo širino stolpcem s
kombiniranjem vrednosti, podanih s funkcijo
repeat() in prostih enot 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;
}
:
Primer
Prav tako je v funkciji repeat() mogoče podati
vrednost auto-fill, ki bo zapolnila
naš vsebnik z enakimi stolpci želene širine:
<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;
}
:
Primer
Zelo priročno je skupaj z auto-fill
uporabiti funkcijo minmax,
ki določa obseg širine stolpcev
od najmanjše do največje vrednosti.
Če širina vsebnika ne sprejme vseh
stolpcev, se bodo nekateri premaknili
v novo vrstico, pri čemer se bodo stolpci v vrstici
enakomerno porazdelili vanjo. Spremenimo
prejšnji primer tako, da v njem navedemo funkcijo minmax.
Za ogled različnih razporeditev stolpcev
spreminjajte širino okna brskalnika:
<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;
}
:
Primer
Zdaj pa uporabimo lastnost auto-fit,
katere razlika od auto-fill je v tem,
da prilagodi število stolpcev
razpoložljivi širini vsebnika, jih razširi ali
skrči:
<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;
}
:
Primer
Poleg fr je mogoče
uporabiti vrednosti v %, ki prav tako določajo
kateri del vsebnika bo zasedel stolpec.
Pri tem se bo najprej izračunala velikost
stolpca v %, preostali prosti prostor
pa bo razdeljen na frakcije:
<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;
}
:
Primer
Uporabimo skupaj lastnosti
grid-template-columns in
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;
}
:
Primer
Z lastnostmi
grid-template-columns in
grid-template-rows
ustvarimo tabelo iz devetih celic, razporejenih
v tri vrstice. Pri čemer bosta drugi in tretji vrstici enake širine,
vsak stolpec pa različno širino:
<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;
}
:
Primer
Zdaj pa v tabeli iz prejšnjega primera naredimo zgornjo vrstico široko dve frakciji, prvi stolpec pa pol frakcije:
<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;
}
:
Glejte tudi
-
lastnost
grid-template-rows,
ki določa število in širino vrstic v mreži -
lastnost
grid-auto-columns,
ki določa število in širino stolpcev v implicitni mreži
