Published Jul 16, 2021Updated Sep 3, 2021
Contribute to Docs

Specifies the spacing between column elements within a grid framework.


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

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;

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%;

All contributors

Looking to contribute?

Learn CSS on Codecademy