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

CSS

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

HTML

<article>
  Li Europan lingues es membres del sam familie. Lor separat existentie es un
  myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li
  lingues differe solmen in li grammatica, li pronunciation e li plu commun
  vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa
  continuar payar custosi traductores. At solmen va esser necessi far uniform
  grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li
  grammatica del resultant lingue es plu simplic e regulari quam ti del
  coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam
  li existent Europan lingues. It va esser tam simplic quam Occidental in fact,
  it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam
  un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es
  membres del sam familie. Lor separat existentie es un myth. Por scientie,
  musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe
  solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos
  directe al desirabilite de un nov lingua franca: On refusa continuar payar
  custosi traductores. At solmen va esser necessi far uniform grammatica,
  pronunciation e plu sommun paroles.
</article>

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

CSS

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

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</section>

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

Master NPM Package Creation

Elevate your skills, boost your projects, and stand out in the coding world.

Learn more

Example 3: Create Gaps between Flex Columns

CSS

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

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

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.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this article