CSS grid-gap Property

Description

The grid-gap property determines the distance (gap) between rows and columns in the grid layout and is a shorthand property for the grid-row-gap and grid-column-gap properties.

The CSS Grid Layout module initially defined the property as a grid-gap, later it is replaced by the gap property. However, to support a wider range of browsers that implemented the grid-gap property rather than the gap , you should use the grid-gap property.

Initial value: See individual properties
Applies to: Grid containers
Inherited: No
Media: Visual
Computed value: See individual properties
Animatable: Yes
CSS Version: CSS3
JavaScript syntax: object.style.gap

Syntax

gap: <row-gap> <column-gap>?

Values

normalThe default row or column spacing used by browsers. For a multi-column layout, this value corresponds to 1em , for all other types it is 0 . This is the default value.
length / percentageSpecifies the spacing between rows or columns using a valid length value, or a percentage value. The value must be positive.

Example

HTML

<div class="grid-container">

   <div>A</div>

   <div>B</div>

   <div>C</div>

   <div>D</div>

   <div>E</div>

   <div>F</div>

</div>

<div class="grid-container2">

   <div>A</div>

   <div>B</div>

   <div>C</div>

   <div>D</div>

   <div>E</div>

   <div>F</div>

</div>

CSS

html, body {
   height: 100%;
   margin: 0;
   overflow: auto; 
}
.grid-container,
.grid-container2 {
   display: grid;
   margin-top: 5px; 
   padding: 10px; 
   background: rgb(0,150,208);
}
.grid-container > div,
.grid-container2 > div { 
   background: rgb(241,101,41); 
   border: 1px solid #000; 
   text-align: center; 
} 
.grid-container {
   grid-template-columns: 50px auto 100px;
   grid-gap: 10px;
}
.grid-container2 {
   height: 50%;
   grid-template-columns: auto auto auto;
   grid-gap: 20% 10px;
}

Result