Egenskapen grid-template-rows
Egenskapen grid-template-rows anger
antalet och bredden på de rader som
ett element kommer att uppta i ett grid eller nät.
I egenskapens värde anger vi radbredderna
i valfri enhet
för storlekar.
Egenskapen anges i föräldraelementet
och bestämmer bredden på raderna för barnelementen.
När pixelvärden anges i egenskaperna
kommer radstorlekarna exakt att motsvara dessa.
Om vi anger ordet auto kommer raderna att
fylla all tillgängligt utrymme. Användning
av enheten fr (fraktion) betyder
att allt utrymme kommer att delas upp
i lika delar. Fördelen med
fr är dess anpassningsförmåga till
olika behållare eller skärmupplösningar,
eftersom fr helt enkelt delar upp dem i det angivna
antalet fraktioner utan koppling till en exakt storlek i pixlar.
Syntax
selector {
grid-template-rows: radbredd;
}
Exempel
Låt oss ange radbredder för våra element i griddet:
<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;
}
:
Exempel
Låt oss ange en fast bredd i pixlar för första och tredje raden, medan den andra raden fyller all tillgängligt utrymme automatiskt:
<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;
}
:
Exempel
Och nu med hjälp av egenskapen
grid-template-rows
gör vi så att första och andra
raden upptar en del av behållaren,
och den tredje raden - tre delar:
<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;
}
:
Exempel
Värden angivna i enheten fr
kan ta bråkform. Låt oss
ändra föregående exempel genom att ange
bredden för andra och tredje raden
som bråktal:
<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;
}
:
Exempel
Låt oss i egenskapen grid-template-rows
använda funktionen repeat(),
som talar om för behållaren att alla
tre rader ska ha samma bredd:
<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;
}
:
Exempel
Och låt oss nu ändra föregående exempel så att till de tre likadana raderna läggs en fjärde rad till, som kommer att uppta två fraktioner av behållaren:
<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;
}
:
Exempel
Låt oss ange för de två första raderna en bredd på en fraktion av behållaren, och för de två sista raderna - på två fraktioner:
<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;
}
:
Exempel
Och låt oss nu ställa in radbredderna
genom att kombinera värden, angivna med hjälp av
funktionen repeat() och fria enheter 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;
}
:
Exempel
Även i funktionen repeat() kan man ange
värdet auto-fill, som fyller
vår behållare med likadana rader med önskad bredd:
<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;
}
:
Exempel
Det är mycket bekvämt att tillsammans med auto-fill
ange funktionen minmax,
som sätter ett intervall för radbredderna
från ett minimivärde till ett maximivärde.
Om behållarens bredd inte rymmer alla
rader kommer några av dem att flyttas
till en ny rad, där raderna i raden
jämnt fördelas i den. Låt oss ändra
föregående exempel genom att ange funktionen minmax i det:
<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;
}
:
Exempel
Låt oss nu ange egenskapen auto-fit,
vilket skiljer sig från auto-fill genom att
den anpassar antalet rader efter
behållarens tillgängliga bredd, genom att utvidga eller
komprimera dem:
<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;
}
:
Exempel
Förutom fr kan man också
använda värden i %, som också anger
vilken del av behållaren som raden kommer att uppta.
Då kommer radens storlek först att beräknas
i %, och det återstående lediga utrymmet
kommer att delas upp i fraktioner:
<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;
}
:
Exempel
Låt oss använda egenskaperna
grid-template-columns och
grid-template-rows tillsammans:
<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;
}
:
Exempel
Låt oss med hjälp av egenskaperna
grid-template-columns och
grid-template-rows
skapa en tabell med nio celler, placerade
i tre rader. Dessutom kommer andra och tredje raden att ha samma bredd,
och varje kolumn - olika bredd:
<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;
}
:
Exempel
Och nu i tabellen från föregående exempel gör vi så att den övre raden är två fraktioner bred, och den första kolumnen - en halv fraktion:
<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;
}
:
Se även
-
egenskapen
grid-template-columns,
som anger antalet och bredden på kolumner i ett grid -
egenskapen
grid-auto-rows,
som anger antalet och bredden på rader i ett implicit grid
