Vlastnost grid-template-rows
Vlastnost grid-template-rows nastavuje
počet a výšku řádků, které
bude prvek zabírat v gridu nebo mřížce.
Jako hodnotu vlastnosti uvádíme výšku řádků
v libovolných jednotkách
pro velikosti.
Vlastnost se uvádí v rodičovském prvku
a určuje výšku řádků potomních prvků.
Při zadání hodnot ve vlastnostech v pixelech
budou velikosti řádků přesně odpovídat.
Pokud zadáme slovo auto, řádky 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 adaptabilita k
různým kontejnerům nebo rozlišením obrazovky,
protože fr prostě rozdělí prostor na uvedený
počet zlomků bez vazby na přesnou velikost v pixelech.
Syntaxe
selektor {
grid-template-rows: výška řádku;
}
Příklad
Nastavme výšku řádků 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-rows: 50px 100px 50px 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 řádku pevnou výšku v pixelech, a druhý řádek ať automaticky vyplní dostupný prostor:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Příklad
A nyní pomocí vlastnosti
grid-template-rows
udělejme, aby první a druhý
řádek zabraly jednu část kontejneru,
a třetí řádek - tři části:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Příklad
Hodnoty uvedené v jednotkách fr
mohou mít zlomkový tvar. Změňme
předchozí příklad uvedením
pro druhý a třetí řádek výšky
v desetinných číslech:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Příklad
Uveďme ve vlastnosti grid-template-rows
funkci repeat(),
která kontejneru sdělí, že všechny
tři řádky musí mít stejnou výšku:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Příklad
A nyní změňme předchozí příklad tak, aby ke třem stejným řádků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-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Příklad
Nastavme prvním dvěma řádkům výšku v jedné frakci kontejneru, a posledním dvěma řádků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-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Příklad
A nyní nastavme výšku řádků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-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Příklad
Také ve funkci repeat() lze uvést
hodnotu auto-fill, která vyplní
náš kontejner stejnými řádky požadované výšky:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Příklad
Velmi výhodné je spolu s auto-fill
uvést funkci minmax,
která nastavuje rozsah výšky řádků
od minimální do maximální hodnoty.
Pokud výška kontejneru nepojme všechny
řádky, některé z nich se přesunou
na nový řádek, přičemž řádky v řádku
se v něm rovnoměrně rozdělí. Změňme
předchozí příklad uvedením funkce minmax:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Příklad
Nyní uveďme vlastnost auto-fit,
jejíž rozdíl od auto-fill spočívá v tom,
že přizpůsobuje počet řádků
dostupné výšce kontejneru, rozšiřuje nebo
zmenšuje je:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Příklad
Také spolu s fr lze
použít hodnoty v %, které také určují
jakou část kontejneru bude řádek zabírat.
Při tom se nejdříve vypočte velikost
řádku v %, a zbývající 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-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 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 řádcích. Přitom druhý a třetí řádek budou mít stejnou výš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
A nyní v tabulce z předchozího příkladu udělejme horní řádek vysoký dvě frakce, a první sloupec - v polovině 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-columns,
která nastavuje počet a šířku sloupců v gridu -
vlastnost
grid-auto-rows,
která nastavuje počet a výšku řádků v implicitním gridu
