grid-column-gap

The grid-column-gap CSS property specifies the gutter between grid columns.

/* <length> values */
grid-column-gap: 20px;
grid-column-gap: 1em;
grid-column-gap: 3vmin;
grid-column-gap: 0.5cm;

/* <percentage> value */
grid-column-gap: 10%;

/* Global values */
grid-column-gap: inherit;
grid-column-gap: initial;
grid-column-gap: unset;

The effect is as though the affected grid lines acquired width: the grid track between two grid lines is the space between the gutters that represent them. For the purpose of track sizing, each gutter is essentially treated as an extra track of the specified length. Negative values are invalid.

Syntax

Values

<length-percentage>

Is the width of the gutter separating the grid columns. <percentage> values are relative to the dimension of the element.

Formal syntax

<length-percentage>
where 
<length-percentage> = <length> | <percentage>

Example

HTML Content

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS Content

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  grid-column-gap: 20px;
}

#grid > div {
  background-color: lime;
}

Specifications

Browser compatibility

See also

• Related CSS properties: grid-row-gap, grid-gap
• Grid Layout Guide: Basic concepts of grid layout - Gutters