CSS grid-gap eigenschap

definitie en gebruik

De grid-gap eigenschap definieert de maat van de gaten tussen rijen en kolommen in de rasterindeling en is een afkorting van de volgende eigenschappen:

Opmerking:Deze eigenschap is in CSS3 hernoemd tot gaten.

Raadpleeg ook:

CSS handleiding:CSS rasterindeling

CSS referentiemanual:grip-row-gap eigenschap

CSS referentiemanual:grip-column-gap eigenschap

voorbeeld

voorbeeld 1

Stel de korte schrijfwijze tussen rijen en kolommen in op 50 pixels:

.grid-container {
  grid-gap: 50px;
}

Probeer het zelf uit

voorbeeld 2

Stel de rijgaten in op 20 pixels, de kolomgaten in op 50 pixels:

.grid-container {
  grid-gap: 20px 50px;
}

Probeer het zelf uit

CSS syntaxis

grid-gap: grid-row-gap grid-column-gap;

eigenschapswaarde

waarde beschrijving
grid-row-gap Stel de maat van de gaten in de rasterindeling in. De standaardwaarde is 0.
grid-column-gap Stel de maat van de kolomgaten in. De standaardwaarde is 0.

technische details

standaardwaarde: 0 0
erfgenamen: nee
animatieproductie: ondersteund. Raadpleeg:animatiegerelateerde eigenschappen.
versie: CSS Grid Layout Module Level 1
JavaScript syntaxis: object.style.gridGap="50px 100px"

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