Vlastnosť grid-template-columns
Vlastnosť grid-template-columns určuje
počet a šírku stĺpcov, ktoré
bude prvok zaberať v gride alebo sieti.
Vlastnosť sa uvádza v nadradenom prvku
a určuje šírku stĺpcov podradených prvkov.
V hodnote vlastnosti uvádzame šírku stĺpcov
v ľubovoľných jednotkách
pre veľkosti.
Pri uvedení hodnôt vo vlastnostiach v pixeloch
budú veľkosti stĺpcov presne zodpovedať im.
Ak zadáme slovo auto, stĺpce budú
vyplňať všetok dostupný priestor. Použitie
jednotky fr (frakcia) znamená,
že celý priestor bude rozdelený
na rovnaké diely. Výhodou
fr je jeho adaptívnosť na
rôzne kontajnery alebo rozlíšenia obrazovky,
pretože fr jednoducho rozdelí ich na uvedené
množstvo frakcií bez viazanosti na presnú veľkosť v pixeloch.
Syntax
selektor {
grid-template-columns: šírka stĺpca;
}
Príklad
Zadajme šírku stĺpcov pre naše prvky v gride:
<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;
}
:
Príklad
Nastavme prvému a tretiemu stĺpcu pevnú šírku v pixeloch, a druhý stĺpec nech automaticky vyplní dostupný priestor:
<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;
}
:
Príklad
A teraz pomocou vlastnosti
grid-template-columns
urobme tak, aby prvý a druhý
stĺpec zaberali jednu časť kontajnera,
a tretí stĺpec - tri časti:
<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;
}
:
Príklad
Hodnoty, uvedené v jednotkách fr
môžu nadobúdať zlomkový tvar. Zmeňme
predošlý príklad, uvedením
pre druhý a tretí stĺpec šírku
v zlomkových číslach:
<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;
}
:
Príklad
Zadajme vo vlastnosti grid-template-columns
funkciu repeat(),
ktorá oznámi kontajneru, že všetky
tri stĺpce musia mať rovnakú šírku:
<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;
}
:
Príklad
A teraz zmeňme predchádzajúci príklad tak, aby k trom rovnakým stĺpcom pridal štvrtý, ktorý zaberie dve frakcie kontajnera:
<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;
}
:
Príklad
Nastavme prvým dvom stĺpcom šírku v jednu frakciu kontajnera, a posledným dvom stĺpcom - v dve frakcie:
<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;
}
:
Príklad
A teraz nastavme šírku stĺpcom
kombináciou hodnôt, uvedených pomocou
funkcie repeat() a voľných jednotiek 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;
}
:
Príklad
Tiež vo funkcii repeat() je možné uvádzať
hodnotu auto-fill, ktorá vyplní
náš kontajner rovnakými stĺpcami potrebnej šírky:
<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;
}
:
Príklad
Veľmi pohodlne spolu s auto-fill
uvádzať funkciu minmax,
ktorá nastavuje rozsah šírky stĺpcov
od minimálnej do maximálnej hodnoty.
Ak šírka kontajnera nepojmie všetky
stĺpce, tak niektoré z nich sa presunú
na nový riadok, pričom stĺpce v riadku
sa rovnomerne rozdelia v nej. Zmeňme
predchádzajúci príklad, uvedením v ňom funkcie minmax.
Preto, aby ste videli rôzne varianty umiestnenia stĺpcov
menite šírku stránky svojho prehliadač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;
}
:
Príklad
Teraz zadajme vlastnosť auto-fit,
odlišnosť ktorého od auto-fill spočíva v tom,
že prispôsobuje počet stĺpcov pod
dostupnú šírku kontajnera, rozširujúc alebo
zmenšujúc ich:
<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;
}
:
Príklad
Tiež popri fr je možné
používať hodnoty v %, ktoré tiež určujú
akú časť kontajnera bude stĺpec zaberať.
Pri tom najskôr bude vypočítaná veľkosť
stĺpca v %, a zvyšný voľný priestor
sa rozdelí na frakcie:
<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;
}
:
Príklad
Použime spolu vlastnosti
grid-template-columns a
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;
}
:
Príklad
Pomocou vlastností
grid-template-columns a
grid-template-rows
vytvorme tabuľku z deviatich buniek, umiestnených
v tri rady. Pričom druhý a tretí rad budú mať rovnakú šírku,
a každý stĺpec - rôznu šírku:
<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;
}
:
Príklad
A teraz v tabuľke z predchádzajúceho príkladu urobme horný rad šírky v dve frakcie, a prvý stĺpec - v polovicu frakcie:
<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;
}
:
Pozrite tiež
-
vlastnosť
grid-template-rows,
ktorá určuje počet a šírku radov v gride -
vlastnosť
grid-auto-columns,
ktorá určuje počet a šírku stĺpcov v implicitnom gride
