Svojstvo grid-template-columns
Svojstvo grid-template-columns zadaje
broj i širinu kolona koje
će element zauzimati u gridu ili mreži.
Svojstvo se navodi u elementu-roditelju
i određuje širinu kolona elemenata-potomaka.
U vrednosti svojstva navodimo širinu kolona
u bilo kojim jedinicama
za veličine.
Pri navođenju u svojstvima vrednosti u pikselima
veličine kolona će tačno odgovarati tim vrednostima.
Ako zadamo reč auto, onda će kolone
popuniti sav dostupan prostor. Korišćenje
jedinice fr (frakcija) znači,
da će sav prostor biti podeljen
na jednake delove. Prednost
fr je njegova adaptivnost na
različite kontejnere ili rezolucije ekrana,
pošto fr jednostavno deli prostor na naznačeni
broj frakcija bez vezivanja za tačnu veličinu u pikselima.
Sintaksa
selektor {
grid-template-columns: širina kolone;
}
Primer
Hajde da zadamo širinu kolona za naše elemente u gridu:
<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
Hajde da naznačimo prvoj i trećoj koloni fiksnu širinu u pikselima, a druga kolona neka automatski popuni dostupan 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
A sada pomoću svojstva
grid-template-columns
učinimo da prva i druga
kolona zauzmu jedan deo kontejnera,
a treća kolona - tri dela:
<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, naznačene u jedinicama fr
mogu imati razlomljene vrednosti. Hajde
da izmenimo prethodni primer, navodeći
za drugu i treću kolonu širinu
u razlomljenim brojevima:
<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
Hajde u svojstvu grid-template-columns
da navedemo funkciju repeat(),
koja će kontejneru saopštiti da sve
tri kolone treba da imaju jednaku širinu:
<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
A sada hajde da izmenimo prethodni primer tako da se na tri iste kolone doda četvrta, koja će zauzeti dve frakcije kontejnera:
<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
Hajde da zadamo prvim dve kolone širinu u jednu frakciju kontejnera, a poslednjim dve kolone - u dve frakcije:
<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
A sada hajde da postavimo širinu kolonama
kombinujući vrednosti, naznačene pomoću
funkcije repeat() i slobodnih jedinica 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
Takođe u funkciji repeat() možemo navoditi
vrednost auto-fill, koja će popuniti
naš kontejner istim kolonama željene š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
Veoma je zgodno zajedno sa auto-fill
navoditi funkciju minmax,
koja zadaje opseg širine kolona
od minimalne do maksimalne vrednosti.
Ako širina kontejnera ne može da primi sve
kolone, onda će neke od njih biti premeštene
na novi red, pri čemu će se kolone u redu
ravnomerno rasporediti u njemu. Hajde da izmenimo
prethodni primer, navodeći u njemu funkciju minmax.
Da biste videli različite varijante raspoređivanja kolona
menjajte širinu stranice svog pregledača:
<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
Sada hajde da navedemo svojstvo auto-fit,
čija se razlika od auto-fill sastoji u tome,
da ono prilagođava broj kolona
dostupnoj širini kontejnera, proširujući ili
skupljajući ih:
<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
Takođe pored fr možemo
koristiti vrednosti u %, koje takođe određuju
koji deo kontejnera će kolona zauzimati.
Pri tome će se prvo izračunati veličina
kolone u %, a preostali slobodni prostor
biti podeljen 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
Hajde da iskoristimo zajedno svojstva
grid-template-columns i
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
Hajde pomoću svojstava
grid-template-columns i
grid-template-rows
da kreiramo tabelu od devet ćelija, raspoređenih
u tri reda. Povrh toga, drugi i treći red će imati jednaku širinu,
a svaka kolona - različitu širinu:
<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
A sada u tabeli iz prethodnog primera učinimo da gornji red ima širinu od dve frakcije, a prva kolona - od pola 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;
}
:
Pogledajte takođe
-
svojstvo
grid-template-rows,
koje zadaje broj i širinu redova u gridu -
svojstvo
grid-auto-columns,
koje zadaje broj i širinu kolona u implicitnom gridu
