A grid-template-rows tulajdonság
A grid-template-rows tulajdonság megadja
a rácsban vagy grid-ben lévő elem által
elfoglalt sorok számát és szélességét.
A tulajdonság értékében a sorok szélességét
bármilyen mértékegységben
megadhatjuk.
A tulajdonság a szülőelemben van megadva
és meghatározza a gyermekelemek sorainak szélességét.
Ha a tulajdonságokban pixelben adjuk meg az értékeket,
a sorok mérete pontosan ennek felel meg.
Ha az auto szót adjuk meg, akkor a sorok
az összes elérhető teret kitöltik. Az
fr (fraction) egység használata azt jelenti,
hogy az összes teret azonos
részekre osztják. Az fr előnye
az adaptivitása a különböző
tárolók vagy képernyőfelbontásokhoz,
mivel az fr egyszerűen felosztja azokat a megadott
számú frakcióra anélkül, hogy pixelekben megadott pontos mérethez kötné.
Szintaxis
selector {
grid-template-rows: sor szélessége;
}
Példa
Állítsuk be a sorok szélességét elemeink számára a rácsban:
<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élda
Adjunk az első és harmadik sorhoz rögzített szélességet pixelben, a második sor pedig töltse ki automatikusan az elérhető teret:
<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élda
Most a grid-template-rows
tulajdonság segítségével
érjük el, hogy az első és második
sor a tároló egy részét foglalja el,
a harmadik sor pedig három részt:
<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élda
Az fr egységben megadott értékek
tört formájúak is lehetnek. Módosítsuk
az előző példát úgy, hogy a második és harmadik sor szélességét
törtszámokban adjuk meg:
<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élda
A grid-template-rows tulajdonságban
használjuk a repeat() függvényt,
amely jelzi a tárolónak, hogy mindhárom
sornak azonos szélességűnek kell lennie:
<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élda
Most módosítsuk az előző példát úgy, hogy a három azonos sorhoz hozzáadunk egy negyediket, amely két frakciót foglal el a tárolóban:
<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élda
Adjunk az első két sorhoz egy frakció szélességet a tárolóban, az utolsó két sorhoz pedig két frakciót:
<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élda
Most állítsuk be a sorok szélességét úgy,
hogy kombináljuk a repeat() függvénnyel
megadott értékeket és a szabad fr egységeket:
<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élda
A repeat() függvényben használhatjuk
az auto-fill értéket is, amely azonos szélességű sorokkal
tölti fel a tárolónkat a kívánt szélességgel:
<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élda
Nagyon kényelmes az auto-fill mellett
használni a minmax függvényt,
amely a sorok szélességének tartományát adja meg
a minimális és maximális érték között.
Ha a tároló szélessége nem fér el az összes
sor, akkor néhányuk új sorba kerül,
eközben a sorban lévő sorok
egyenletesen elosztódnak benne. Módosítsuk
az előző példát úgy, hogy abban a minmax függvényt adjuk meg:
<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élda
Most használjuk az auto-fit tulajdonságot,
amely az auto-fill-től abban különbözik,
hogy a sorok számát igazítja
a tároló elérhető szélességéhez, kibővítve vagy
összehúzva azokat:
<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élda
Az fr mellett használhatunk
%-ban megadott értékeket is, amelyek szintén meghatározzák,
hogy a tároló mekkora részét foglalja el a sor.
Ekkor először a sor méretét számolják ki
%-ban, a maradék szabad teret pedig
frakciókra osztják:
<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élda
Használjuk együtt a
grid-template-columns és
grid-template-rows tulajdonságokat:
<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élda
A
grid-template-columns és
grid-template-rows
tulajdonságok segítségével
hozzunk létre egy kilenc cellából álló táblázatot, amely
három sorban helyezkedik el. A második és harmadik sor azonos szélességű legyen,
minden oszlop pedig különböző szélességű:
<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élda
Most az előző példa táblázatában tegyük a felső sort két frakció szélességűvé, az első oszlopot pedig fél frakcióvá:
<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;
}
:
Lásd még
-
a
grid-template-columnstulajdonság,
amely megadja a rács oszlopainak számát és szélességét -
a
grid-auto-rowstulajdonság,
amely megadja az implicit rács sorainak számát és szélességét
