Skip to main content
Home / CSS Almanac / Properties / C / column-gap

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.

Related Properties

Additional Resources

Browser Support

Multi-column layout support:

Chrome Safari Firefox Opera IE Android iOS
Any 3+ 1.5+ 11.1+ 10+ 2.3+ 6.1+

Don't forget your prefixes!

icon-link icon-logo-star icon-search icon-star