CSS column-gap

The space between the columns is set with column-gap.

<style>
  .column-gap {
    column-count: 2;
    column-gap: 70px;
  }
</style>

<div class="column-gap">
  Paul Gauguin was a French Post-Impressionist
  artist. Unappreciated until after his death,
  Gauguin is now recognized for his experimental
  use of color and Synthetist style that were
  distinct from Impressionism. Toward the end
  of his life, he spent ten years in French
  Polynesia. The paintings from this time
  depict people or landscapes from that region.

  His work was influential on the French
  avant-garde and many modern artists, such
  as Pablo Picasso and Henri Matisse, and he
  is well known for his relationship with
  Vincent and Theo van Gogh. Gauguin's art
  became popular after his death, partially
  from the efforts of dealer Ambroise Vollard,
  who organized exhibitions of his work late in
  his career and assisted in organizing two
  important posthumous exhibitions in Paris.
</div>

column-gap: length | normal | initial | inherit;

Click the buttons to see different column-gap values.

length 50px normal initial inherit

<style>
  .column-gap-example { 
    column-count: 2; 
    column-gap: normal; 
  }
</style>

<div class="column-gap-example">
  Paul Gauguin was a French Post-Impressionist
  artist. Unappreciated until after his death,
  Gauguin is now recognized for his experimental
  use of color and Synthetist style that were
  distinct from Impressionism. Toward the end
  of his life, he spent ten years in French
  Polynesia. The paintings from this time
  depict people or landscapes from that region.

  His work was influential on the French
  avant-garde and many modern artists, such
  as Pablo Picasso and Henri Matisse, and he
  is well known for his relationship with
  Vincent and Theo van Gogh. Gauguin's art
  became popular after his death, partially
  from the efforts of dealer Ambroise Vollard,
  who organized exhibitions of his work late in
  his career and assisted in organizing two
  important posthumous exhibitions in Paris.
</div>

Flex Layout

A flex layout with a column-gap of 25 pixels.

<style>
  .flex {
    background-color: #776fac;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 25px;
  }

  .flex > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
    width: 100px;
  }
</style>

<div class="flex">
  <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>
  <div>13</div>
</div>          

This table shows when column-gap support started for each browser.

Chrome	50.0	Apr 2016
Firefox	52.0	Mar 2017
IE/Edge	10.0	Sep 2012
Opera	37.0	May 2016
Safari	9.0	Sep 2015

• Our CSS columns Property Reference
• Our CSS Grid Tutorial
• Our CSS Flexbox Tutorial