CSS grid-column-gap

Specifies the spacing between column elements within a grid framework.

Syntax

.div-container {
  column-gap: <gap-value>;
}

Copy to clipboard
Copy to clipboard

where <gap-value> can be one of the following:

• Grid keyword: normal
• Pixel value: 3px
• A percentage: 1%

Example 1

Columns with five pixels of buffer between each:

.content-a-container {
  display: grid;
  grid-auto-columns: 20%;
  column-gap: 5px;
}

Copy to clipboard
Copy to clipboard

Example 2

A one percent spacing across grid column elements:

.content-b-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 1%;
}

Copy to clipboard
Copy to clipboard