CSS grid-row eigenschap

Definitie en gebruik

De grid-row-eigenschap definieert de grootte van het grid-item en zijn positie in het grid-lay-out, en is een verkorte eigenschap van de volgende eigenschappen:

Zie ook:

CSS handleiding:CSS grid layout

Voorbeeld

Voorbeeld 1

Maak "item1" beginnen op rij 1 en overspan twee rijen:

.item1 {
  grid-row: 1 / span 2;
}

Probeer het zelf

Voorbeeld 2

Je kunt de rijlijnwaarde gebruiken in plaats van het aantal rijen dat je wilt overspannen:

.item1 {
  grid-row: 1 / 3;
}

Probeer het zelf

CSS syntaxis

grid-row: grid-row-start / grid-row-end;

Eigenschapswaarde

Waarde Beschrijving
grid-row-start Bepaalt vanaf welke rij items worden weergegeven.
grid-row-end Bepaalt op welke rijlijn het weergeven van items stopt, of over hoeveel rijen het overspant.

Technische details

Standaardwaarde: auto / auto
Inherits: Nee
Animatieproductie: Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS Grid Layout Module Level 1
JavaScript syntaxis: object.style.gridRow="2 / span 2"

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