Skip to main content

column-gap CSS Property – How to Create Gaps between Columns

column-gap specifies the gap sizes between a multi-column, grid, or flexbox container's columns.

note
  • A gap is sometimes called a gutter.
  • 1em is column-gap's default value in a multi-column layout module.
  • 0 is column-gap's default value in a grid and flexbox layout modules.

Example 1: Create a Gap between Two Columns

article {
column-count: 2;
column-gap: 50px;
}

Try it on StackBlitz

The snippet above used the column-gap property to create a 50px gap between the <article> element's columns.

Example 2: Create Gaps between Grid Columns

section {
display: grid;
grid-template-columns: 10% 50% 30%;
column-gap: 5%;
background-color: orange;
margin: 10px;
padding: 7px;
}

div {
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the column-gap property to create a 5% gap between the grid container's columns.

Example 3: Create Gaps between Flex Columns

section {
display: flex;
column-gap: 15px;
background-color: orange;
margin: 10px;
padding: 7px;
}

div {
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
flex-grow: 1;
}

Try it on StackBlitz

The snippet above used the column-gap property to create a 15px gap between the flex container's columns.

tip

Use the CSS column-rule property to create lines between your column gaps.

Overview

This article discussed what a CSS column-gap property is. We also used examples to see how it works.