Īpašība grid-template-rows
Īpašība grid-template-rows nosaka
rindu skaitu un platumu, kuru
elements aizņems gridā vai režģī.
Īpašības vērtībā mēs norādām rindu platumu
jebkuros mērvienības
izmēriem.
Īpašība tiek norādīta vecāka elementā
un nosaka bērnu elementu rindu platumu.
Norādot īpašībās vērtības pikseļos,
rindu izmēri precīzi atbilst tiem.
Ja mēs norādām vārdu auto, tad rindas
aizpildīs visu pieejamo vietu. Izmantojot
mērvienību fr (frakcija) nozīmē,
ka visa vieta tiks sadalīta
vienādās daļās. fr priekšrocība
ir tās pielāgojamība
dažādiem konteineriem vai ekrāna izšķirtspējai,
jo fr vienkārši sadala to norādītajā
frakciju skaitā bez saistības ar precīzu izmēru pikseļos.
Sintakse
selektors {
grid-template-rows: rindu platums;
}
Piemērs
Norādīsim rindu platumu mūsu elementiem gridā:
<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;
}
:
Piemērs
Norādīsim pirmajai un trešajai rindai fiksētu platumu pikseļos, bet otrā rinda automātiski aizpildīs pieejamo vietu:
<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;
}
:
Piemērs
Tagad ar īpašības
grid-template-rows palīdzību
padarīsim tā, lai pirmā un otrā
rinda aizņemtu vienu konteinera daļu,
bet trešā rinda - trīs daļas:
<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;
}
:
Piemērs
Vērtības, kas norādītas fr mērvienībās
var būt daļskaitļi. Mainīsim
iepriekšējo piemēru, norādot
otrajai un trešajai rindai platumu
daļskaitļos:
<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;
}
:
Piemērs
Īpašībā grid-template-rows
norādīsim funkciju repeat(),
kas pateiks konteineram, ka visām
trim rindām jābūt vienādam platumam:
<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;
}
:
Piemērs
Tagad mainīsim iepriekšējo piemēru tā, lai trim vienādām rindām pievienotos ceturtā, kas aizņems divas konteinera frakcijas:
<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;
}
:
Piemērs
Norādīsim pirmajām divām rindām platumu vienā konteinera frakcijā un pēdējām divām rindām - divās frakcijās:
<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;
}
:
Piemērs
Tagad iestatīsim rindu platumu
apvienojot vērtības, kas norādītas ar
funkcijas repeat() un brīvo mērvienību fr palīdzību:
<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;
}
:
Piemērs
Arī funkcijā repeat() var norādīt
vērtību auto-fill, kas aizpildīs
mūsu konteineru ar vienādām rindām vajadzīgajā platumā:
<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;
}
:
Piemērs
Ļoti ērti kopā ar auto-fill
norādīt funkciju minmax,
kas nosaka rindu platuma diapazonu
no minimālās līdz maksimālajai vērtībai.
Ja konteinera platums nevar ietvert visas
rindas, tad dažas no tām pārvietosies
uz jaunu rindu, bet rindas rindā
vienmērīgi sadalīsies tajā. Mainīsim
iepriekšējo piemēru, norādot tajā funkciju 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;
}
:
Piemērs
Tagad norādīsim īpašību auto-fit,
kas atšķiras no auto-fill ar to,
ka tas pielāgo rindu skaitu
pieejamajam konteinera platumam, paplašinot vai
saspiežot tās:
<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;
}
:
Piemērs
Arī līdzās fr var
izmantot vērtības %, kas arī nosaka
kādu konteinera daļu aizņems rinda.
Vispirms tiks aprēķināts rindas izmērs
%, bet atlikušā brīvā vieta
tiks sadalīta frakcijās:
<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;
}
:
Piemērs
Izmantosim kopā īpašības
grid-template-columns un
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;
}
:
Piemērs
Ar īpašību
grid-template-columns un
grid-template-rows palīdzību
izveidosim tabulu no deviņām šūnām, kas izvietotas
trīs rindās. Turklāt otrajai un trešajai rindai būs vienāds platums,
bet katram kolonnam - atšķirīgs platums:
<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;
}
:
Piemērs
Tagad tabulā no iepriekšējā piemēra padarīsim augšējo rindu platumā divās frakcijās, bet pirmo kolonnu - pusfrakcijā:
<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;
}
:
Skatiet arī
-
īpašība
grid-template-columns,
kas nosaka kolonnu skaitu un platumu gridā -
īpašība
grid-auto-rows,
kas nosaka rindu skaitu un platumu netiešajā gridā
