Skip to content
Announcing the new Pro Zone. Check it out!

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.

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.

CodeSweetly ads

Express Your Love for Coding!

Explore CodeSweetly's Shop for an array of stylish products to enhance your coding experience.
Shop now

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.