column-gap

When working with columns, you might notice that between each column is a space, or gap. The browser sets the gap to 1em. Generally, 1em is a comfortable space between columns. If you find that the gap is too wide, or too narrow, you can adjust it with column-gap.

article {
  -webkit-columns: 2;
     -moz-columns: 2;
          columns: 2;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
}

The value of column-gap can be normal or a length.

The value of normal is 1em. As mentioned, 1em is approximately the default gap length. If you find that 1em, or normal, is the right gap length for you, then you can save yourself a rule by not setting column-gap.

The length value must be greater than or equal to 0. The length can be any CSS unit except percent.

Keep in mind that column-gap takes up space and will push the column content to fit the gap.

<div class="example">
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p> Nulla vitae magna sed sapien ultricies dapibus a non libero. Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Cras porta bibendum orci nec dapibus. </p>
  <p>Proin blandit, tortor quis tristique porta, nisl est rhoncus turpis, non interdum nibh ligula sit amet dolor. Vestibulum tempus magna auctor purus elementum congue.</p>
  <p>Sed sagittis aliquam nulla vel viverra. Sed at augue eros. Nam tincidunt mi eu malesuada molestie.</p>
</div>

.example {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  -webkit-column-gap: 5em;
  -moz-column-gap: 5em;
  column-gap: 5em;
  max-width: 450px;
  margin: 3em auto 0;
}

body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  padding: 1em;
}

p {
  margin-bottom: 1.3em;
  text-align: justify;
}

Related Properties

• columns
• column-fill
• column-count
• column-rule
• column-span
• column-width

Browser Support

Multi-column layout support:

Don’t forget your prefixes!