CSS gap egenskap

Definition och användning

gap-attributet definierar avståndet mellan raderna och kolonnerna i en flexbox, ett grid eller flera kolumner. Det är en förkortning av följande egenskaper:

Observera:gap-attributet kallades tidigare grid-gap.

Se också:

CSS kurs:CSS gridlayout

CSS kurs:CSS flexboxlayout

CSS kurs:CSS flerkolumnslayout

CSS referenshandbok:row-gap-attribut

CSS referenshandbok:column-gap-attribut

Exempel

Exempel 1

Ställ in avståndet mellan raderna och kolonnerna till 50px:

.grid-container {
  gap: 50px;
}

Prova själv

Exempel 2: Gridlayout

Ställ in radavståndet till 20px och kolumnavståndet till 50px i en gridlayout:

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

Prova själv

Exempel 3: Flexboxlayout

Ställ in radavståndet till 20px och kolumnavståndet till 70px i en flexboxlayout:

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

Prova själv

Exempel 4: Flerkolumnslayout

Ställ in kolumnavståndet till 50px i en flerkolumnslayout:

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

Prova själv

CSS-syntax

gap: row-gap column-gap|initial|inherit;
Värde Beskrivning
row-gap Ställ in storleken på avståndet mellan raderna i ett grid eller en flexbox.
column-gap Ställ in storleken på avståndet mellan kolonnerna i ett grid, en flexbox eller flera kolumner.
initial Sätt detta attribut till dess standardvärde. Se initial.
inherit Följer detta attribut från föräldrelementet. Se inherit.

Tekniska detaljer

Standardvärde: normal normal
Ärvning: Nej
Animation tillverkning: Stöds. Se enskilda egenskaper. Se:Animation relaterade egenskaper.
Version: CSS Box Alignment Module Level 3
JavaScript-syntax: object.style.gap="50px 100px"

Webbläsarstöd

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

layout Chrome IE / Edge Firefox Safari Opera
i ett grid 66 16 61 12 53
i en flexbox 84 84 63 14.1 70
i flera kolumner 66 16 61 inte stöds 53