CSS grid-gap egenskab

Definisjon og bruk

grid-gap-egenskapen definerer størrelsen på avstanden mellom rad og kolonne i rutenettet, og er en kortform for følgende egenskaper:

Bemerk:Denne egenskapen er omdøpt til gap.

Se også:

CSS-læringsveiledning:CSS rutenett

CSS referansehåndbok:grip-row-gap-egenskap

CSS referansehåndbok:grip-column-gap-egenskap

Eksempel

Eksempel 1

Sett kortformen mellom rad og kolonne til 50 pixel:

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

Prøv selv

Eksempel 2

Sett radavstanden til 20 pixel, kolonneavstanden til 50 pixel:

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

Prøv selv

CSS-syntaks

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

Egenskapsverdi

Verdi Beskrivelse
grid-row-gap Sett størrelsen på avstanden mellom rader i rutenettet. Standardverdien er 0.
grid-column-gap Sett størrelsen på kolonneavstanden. Standardverdien er 0.

Tekniske detaljer

Standardverdi: 0 0
Arv: Nei
Animasjonsproduksjon: Støttet. Se også:Animasjonsrelaterte egenskaper.
Versjon: CSS Grid Layout Module Level 1
JavaScript-syntaks: object.style.gridGap="50px 100px"

Nettleserstøtte

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

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44