CSS grid-template-rows eigenschap

Definitie en gebruik

grid-template-rows definieert het aantal rijen (en hoogte) in het rasterlay-out.

De waarden zijn een lijst gescheiden door spaties, waarbij elke waarde de hoogte van de bijbehorende rij specificeert.

Zie ook:

CSS handleiding:CSS rasterlay-out

CSS referentiemanual:grid-columns eigenschap

CSS referentiemanual:grid-template eigenschap

Voorbeeld

Stel de rij-grootte (hoogte) in:

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

Probeer het zelf uit

CSS syntax

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

Eigenschapswaarde

Waarde Beschrijving
none Afmetingen niet ingesteld. Maak rijen aan wanneer nodig.
auto De afmeting van de rij hangt af van de grootte van het container en de grootte van de inhoud van de items in de rij.
max-content Stel de afmeting van elke rij in op basis van het grootste item in de rij.
min-content Stel de afmeting van elke rij in op basis van de kleinste item in de rij.
length Stel de afmeting van de rij in door gebruik te maken van geldige lengtewaarden. RaadpleegLengte-eenheid.

Technische details

Standaardwaarde: none
Inherit: Nee
Animatie maken: Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridTemplateRows="50px 200px"

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

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