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

CSS
HTML

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

<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
HTML

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

<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

Example 3: Create Gaps between Flex Columns

CSS
HTML

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

<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.

Support CodeSweetly