column-gap Property

In order to set some spacing between columns, use the column-gap property. This takes the same values as column-width (i.e., a standard length value, a percentage value, auto and inherit) as well as one more: normal. This last property is the default, and the specification recommends that it be set to a value of 1 em in width, though individual browsers may differ in how they render this. When the auto value is used, it tells the browser to make the gaps between the columns equal to each other.

If column rules are used, they are placed in the middle of the column gaps. It is worth noting that the width value set to any column rules does not affect the width of any column gaps that are set. The following code snippet adds a 15-pixel-wide column gap to a div element:

div.columns {column-count: 3; column-width: 150px 35% auto;
column-gap: 15px}

The only other thing worth noting is that column-gap values are not allowed to be negative, as this would allow for a situation where the content from one column could overlap that of an adjacent column.