Styling columns

The gap between columns is controlled using the column-gap or gap property. The column-gap property is defined in the multi-column layout module. The gap property is defined in the box alignment module. This is a unified property to define gaps between boxes in all layouts that support gaps, including CSS grid layout and CSS flexible box layout.

The initial value of column-gap is 1em, which prevents columns from running into each other. In other layout methods, column-gap is supported as a synonym for gap, but with an initial value of 0. The keyword value normal sets column-gap to the initial value.

You can change the gap by using any <length> value. In the example below, the column-gap is set to 40px.

The allowed value for column-gap is a <length-percentage>, meaning percentages are allowed. Percentage values for column-gap are calculated as a percentage of the width of the multicol container.

The specification defines column-rule-width, column-rule-style and column-rule-color, providing a shorthand column-rule. These properties work in exactly the same way as the border properties: any <line-style> can be used as a column-rule-style, just as for valid border-style.

These properties are applied to the element, which is the multicol container, and therefore, all columns will have the same rule. Rules are only drawn between columns and not on the outer edges. Rules are also only drawn between columns that have content.

In this next example, a 5px-dotted rule with a color of rebeccapurple has been created using the longhand values.

Note that the rule itself does not take up any space: a wide rule will not push the columns apart to make space for the rule. Instead, the rule overlays the gap.

The example below uses a very wide rule of 40px and a 10px gap. The rule displays under the column content. To make space on both sides of the rule, the gap would need to be increased to be larger than 40px.

This article details all the current ways in which column boxes can be styled. In the next guide, we will take a look at making elements inside a container span across all columns.