Vlastnosť grid-template-rows
Vlastnosť grid-template-rows určuje
počet a šírku riadkov, ktoré
bude prvok zaberať v gride alebo mriežke.
V hodnote vlastnosti určujeme šírku riadkov
v ľubovoľných jednotkách
pre veľkosti.
Vlastnosť sa uvádza v prvku-rodičovi
a určuje šírku riadkov prvkov-potomkov.
Pri uvedení hodnôt vo vlastnostiach v pixeloch
veľkosti riadkov budú presne zodpovedať im.
Ak zadáme slovo auto, potom riadky 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ť k
rôznym kontajnerom alebo rozlíšeniam obrazovky,
pretože fr jednoducho rozdelí ich na uvedené
množstvo frakcií bez viazanosti na presnú veľkosť v pixeloch.
Syntax
selektor {
grid-template-rows: šírka riadku;
}
Príklad
Zadajme šírku riadkov 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-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Príklad
Zadajme prvému a tretiemu riadku pevnú šírku v pixeloch, a druhý riadok nech automaticky vyplní dostupný priestor:
<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;
}
:
Príklad
A teraz pomocou vlastnosti
grid-template-rows
urobme tak, aby prvý a druhý
riadok zabrali jednu časť kontajnera,
a tretí riadok - tri časti:
<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;
}
:
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í riadok šírku
v zlomkových číslach:
<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;
}
:
Príklad
Zadajme vo vlastnosti grid-template-rows
funkciu repeat(),
ktorá oznámi kontajneru, že všetky
tri riadky musia mať rovnakú šírku:
<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;
}
:
Príklad
A teraz zmeňme predošlý príklad tak, aby k trom rovnakým riadkom 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-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Príklad
Zadajme prvým dvom riadkom šírku v jednej frakcii kontajnera, a posledným dvom riadkom - v dvoch frakciá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;
}
:
Príklad
A teraz nastavme šírku riadkom
skombinovaním 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-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;
}
:
Príklad
Tiež vo funkcii repeat() je možné uvádzať
hodnotu auto-fill, ktorá vyplní
náš kontajner rovnakými riadkami potrebnej šírky:
<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;
}
:
Príklad
Veľmi pohodlne spolu s auto-fill
uvádzať funkciu minmax,
ktorá nastavuje rozsah šírky riadkov
od minimálnej do maximálnej hodnoty.
Ak šírka kontajnera nepojmie všetky
riadky, tak ich niektoré z nich sa presunú
na nový riadok, pričom riadky v riadku
sa rovnomerne rozdelia v nej. Zmeňme
predošlý príklad, uvedením v ňom funkcie 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;
}
:
Príklad
Teraz zadajme vlastnosť auto-fit,
odlišnosť ktorého od auto-fill spočíva v tom,
že prispôsobuje množstvo riadkov 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-rows: repeat(auto-fit, minmax(100px, 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 riadok zaberať.
Pri tom najskôr bude vypočítavaná veľkosť
riadku 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-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 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 troch riadkoch. Pričom druhý a tretí riadok 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 predošlého príkladu urobme horný riadok šírky v dvoch frakciách, a prvý stĺpec - v polovici 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-columns,
ktorá určuje počet a šírku stĺpcov v gride -
vlastnosť
grid-auto-rows,
ktorá určuje počet a šírku riadkov v implicitnom gride
