CSS grid-template-rows egenskap

Definition och användning

grid-template-rows definierar antalet rader (och höjder) i nätverkslayouten.

Värden är en lista av separerade värden med mellanslag, där varje värde anger höjden för motsvarande rad.

Se också:

CSS Lärarledd kurser:CSS Grid Layout

CSS Referenshandbok:grid-columns egenskap

CSS Referenshandbok:grid-template egenskap

Exempel

Bestäm radstorlek (höjd):

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

Prova själv

CSS-syntax

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

Egenskapsvärde

Värde Beskrivning
none Ingen storlek är inställd. Skapa raden vid behov.
auto Radstorleken beror på behållarens storlek samt storleken på komponentinnehållet i raden.
max-content Ställ in varje rads storlek baserat på den största komponenten i raden.
min-content Ställ in varje rads storlek baserat på den minsta komponenten i raden.
length Ställ in radstorlek, genom att använda giltiga längd värden. SeLängd enheter.

Tekniska detaljer

Standardvärde: none
Ärvning: Nej
Animationshantering: Stöds. Se:Animationsspecifika egenskaper.
Version: CSS Grid Layout Module Level 1
JavaScript-syntax: object.style.gridTemplateRows="50px 200px"

Webbläsarstöd

Talen i tabellen anger den första webbläsare som fullständigt stöder egenskapen.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44