CSS grid-gap egenskap

Definition och användning

grid-gap egenskap definierar storleken på avståndet mellan rad och kolumn i nätverkslayouten och är en förkortning av följande egenskaper:

Observera:Denna egenskap har döpts om till gap.

Se också:

CSS-tutorial:CSS-gridlayout

CSS-referenshandbok:grip-row-gap egenskap

CSS-referenshandbok:grip-column-gap egenskap

Exempel

Exempel 1

Ställ in kortform för rad och kolumn till 50 pixlar:

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

Prova själv

Exempel 2

Ställ in radens avstånd till 20 pixlar, kolumnens avstånd till 50 pixlar:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
grid-row-gap Ställ in storleken på radens avstånd i nätverkslayouten. Standardvärdet är 0.
grid-column-gap Ställ in storleken på kolumnens avstånd. Standardvärdet är 0.

Tekniska detaljer

Standardvärde: 0 0
Arv: Nej
Animeringsproduktion: Stöds. Se vidare:Animeringsrelaterade egenskaper.
Version: CSS Grid Layout Module Level 1
JavaScript-syntax: object.style.gridGap="50px 100px"

Webbläsarstöd

Tal i tabellen indikerar den första webbläsarens version som fullständigt stöder detta egenskap.

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