CSS gap eigenschap

Definitie en gebruik

De eigenschap gap definieert de tussenruimte tussen rijen en kolommen in een flexbox, raster of meercolombenlay-out. Het is een verkorte eigenschap van de volgende eigenschappen:

Opmerking:De eigenschap gap heette eerder grid-gap.

Zie ook:

CSS handleiding:CSS rasterlay-out

CSS handleiding:CSS flexboxlay-out

CSS handleiding:CSS meercolombenlay-out

CSS referentiehandleiding:row-gap eigenschap

CSS referentiehandleiding:column-gap eigenschap

voorbeeld

Voorbeeld 1

Stel de afstand tussen de rijen en kolommen in op 50px:

.grid-container {
  gap: 50px;
}

Probeer het zelf uit

Voorbeeld 2: Rasterlay-out

Stel de afstand tussen de rijen in een rasterlay-out in op 20px en de afstand tussen de kolommen in op 50px:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

Probeer het zelf uit

Voorbeeld 3: Flexboxlay-out

Stel de afstand tussen de rijen in een flexboxlay-out in op 20px en de afstand tussen de kolommen in op 70px:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

Probeer het zelf uit

Voorbeeld 4: Meercolombenlay-out

Stel de afstand tussen de kolommen in een meercolombenlay-out in op 50px:

#newspaper {
  columns: 3;
  gap: 50px;
}

Probeer het zelf uit

CSS syntaxis

gap: row-gap column-gap|initial|vererfbaar;
waarde beschrijving
row-gap Stel de grootte van de tussenruimte tussen de rijen in een raster of flexbox in.
column-gap Stel de grootte van de tussenruimte tussen de kolommen in een raster, flexbox of meerdere kolommen in.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
vererfbaar Deze eigenschap vererft van de ouderlijke element. Raadpleeg vererfbaar.

technische details

standaardwaarde: normaal normaal
vererfbaarheid: nee
animatie maken: ondersteund. Raadpleeg afzonderlijke eigenschappen. Zie ook:animatiegerelateerde eigenschappen.
versie: CSS Box Alignment Module Niveau 3
JavaScript syntaxis: object.style.gap="50px 100px"

browserondersteuning

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

lay-out Chrome IE / Edge Firefox Safari Opera
in een raster 66 16 61 12 53
in een flexbox 84 84 63 14.1 70
in meerdere kolommen 66 16 61 niet ondersteund 53