CSS gap egenskab

Definisjon og bruk

gap-egenskapen definerer avstanden mellom radene og kolonnene i et fleksibelt rammeverk, et gitter eller flere kolonner. Det er en forkortelse for følgende egenskaper:

Bemerk:gap-egenskapen het tidligere grid-gap.

Se også:

CSS tutorial:CSS gitterlayout

CSS tutorial:CSS fleksibelt rammeverk

CSS tutorial:CSS flerkolonneoppsett

CSS referansehåndbok:row-gap-egenskap

CSS referansehåndbok:column-gap-egenskap

Eksempel

Eksempel 1

Sett avstand mellom radene og kolonnene til 50px:

.grid-container {
  gap: 50px;
}

Prøv det selv

Eksempel 2: Gitteroppsett

Sett radspacing til 20px og kolonnespacing til 50px i et gitteroppsett:

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

Prøv det selv

Eksempel 3: Fleksibelt rammeverk

Sett radspacing til 20px og kolonnespacing til 70px i et fleksibelt rammeverk:

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

Prøv det selv

Eksempel 4: Flerkolonneoppsett

Sett kolonnespacing til 50px i et flerkolonneoppsett:

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

Prøv det selv

CSS syntaks

gap: row-gap column-gap|initial|inherit;
Verdi Beskrivelse
row-gap Sett mellomrom mellom radene i et gitter eller en fleksibel ramme.
column-gap Sett storskala mellomrom mellom kolonnene i et gitter, en fleksibel ramme eller flere kolonner.
initial Sett denne egenskapen til standardverdien. Se initial.
inherit Arv denne egenskapen fra foreldrelementet. Se inherit.

Tekniske detaljer

Standardverdi: normal normal
Arv: Nei
Animasjonsproduksjon: Støttet. Se separate egenskaper. Se:Animasjonsrelaterte egenskaper.
Versjon: CSS Box Alignment Module Level 3
JavaScript syntaks: object.style.gap="50px 100px"

Nettleserstøtte

Tallene i tabellen angiver den første nettleserversjonen som fullt ut støtter egenskapen.

layout Chrome IE / Edge Firefox Safari Opera
i et gitter 66 16 61 12 53
i en fleksibel ramme 84 84 63 14.1 70
i flere kolonner 66 16 61 ikke understøttet 53