Vlastnost grid-template-columns
Vlastnost grid-template-columns nastavuje
počet a šířku sloupců, které
bude prvek v gridu nebo mřížce zabírat.
Vlastnost se uvádí v rodičovském prvku
a definuje šířku sloupců potomních prvků.
V hodnotě vlastnosti uvádíme šířku sloupců
v libovolných jednotkách
pro velikosti.
Při uvedení hodnot ve vlastnostech v pixelech
budou velikosti sloupců přesně odpovídat.
Pokud zadáme slovo auto, sloupce budou
vyplňovat veškerý dostupný prostor. Použití
jednotky fr (fraction) znamená,
že veškerý prostor bude rozdělen
na stejné podíly. Výhodou
fr je jeho adaptivita k
různým kontejnerům nebo rozlišením obrazovky,
protože fr prostě rozděluje prostor na uvedený
počet zlomků bez vazby na přesnou velikost v pixelech.
Syntaxe
selektor {
grid-template-columns: šířka sloupce;
}
Příklad
Nastavme šířku sloupců pro naše prvky v 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;
}
:
Příklad
Nastavme prvnímu a třetímu sloupci pevnou šířku v pixelech, a druhý sloupec ať automaticky vyplní dostupný 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;
}
:
Příklad
Nyní pomocí vlastnosti
grid-template-columns
udělejme, aby první a druhý
sloupec zabraly jednu část kontejneru,
a třetí sloupec - tři části:
<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;
}
:
Příklad
Hodnoty uvedené v jednotkách fr
mohou mít desetinný tvar. Změňme
předchozí příklad uvedením
pro druhý a třetí sloupec šířky
v desetinných číslech:
<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;
}
:
Příklad
Uveďme ve vlastnosti grid-template-columns
funkci repeat(),
která kontejneru sdělí, že všechny
tři sloupce musí mít stejnou šířku:
<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;
}
:
Příklad
Nyní změňme předchozí příklad tak, aby ke třem stejným sloupcům přibyl čtvrtý, který zabere dvě frakce kontejneru:
<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;
}
:
Příklad
Nastavme prvním dvěma sloupcům šířku v jedné frakci kontejneru, a posledním dvěma sloupcům - ve dvou frakcích:
<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;
}
:
Příklad
Nyní nastavme šířku sloupcům
kombinací hodnot uvedených pomocí
funkce repeat() a volných jednotek 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;
}
:
Příklad
Také ve funkci repeat() lze uvádět
hodnotu auto-fill, která vyplní
náš kontejner stejnými sloupci požadované šířky:
<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;
}
:
Příklad
Velmi pohodlně je spolu s auto-fill
uvádět funkci minmax,
která nastavuje rozsah šířky sloupců
od minimální do maximální hodnoty.
Pokud šířka kontejneru nepojme všechny
sloupce, některé z nich se přesunou
na nový řádek, přičemž sloupce v řádku
se v něm rovnoměrně rozdělí. Změňme
předchozí příklad uvedením v něm funkce minmax.
Pro vidění různých variant umístění sloupců
změňte šířku stránky svého prohlížeče:
<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;
}
:
Příklad
Nyní uveďme vlastnost auto-fit,
jehož rozdíl od auto-fill spočívá v tom,
že přizpůsobuje počet sloupců
dostupné šířce kontejneru, rozšiřuje nebo
zužuje je:
<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;
}
:
Příklad
Také vedle fr lze
používat hodnoty v %, které také určují
jakou část kontejneru bude sloupec zabírat.
Při tom nejdříve bude vypočítávána velikost
sloupce v %, a zbylý volný prostor
se rozdělí na frakce:
<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;
}
:
Příklad
Použijme společně 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;
}
:
Příklad
Pomocí vlastností
grid-template-columns a
grid-template-rows
vytvořme tabulku z devíti buněk umístěných
ve třech řadách. Přitom druhá a třetí řada budou mít stejnou šířku,
a každý sloupec - různou šířku:
<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;
}
:
Příklad
Nyní v tabulce z předchozího příkladu udělejme horní řadu šířky ve dvě frakce, a první sloupec - v polovinu frakce:
<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;
}
:
Viz také
-
vlastnost
grid-template-rows,
která nastavuje počet a šířku řad v gridu -
vlastnost
grid-auto-columns,
která nastavuje počet a šířku sloupců v implicitním gridu
