CSS column-gap

The column-gap property is used to specify the width of the gap between columns in a multi-column layout. This property only applies to elements with the column-count or column-width property set. If the column count is set to 1, the column-gap property has no effect.

The default value of column-gap is normal, which means it will use the browser's default gap between columns. You can specify the gap in pixels, percentages, em, etc.

Let's take a look at some examples to see how the column-gap property works:

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis leo vitae lorem gravida, at cursus elit convallis. Vivamus in massa eu orci vehicula interdum. Ut nec dolor quis arcu consequat efficitur.

Curabitur scelerisque, enim et ultrices fringilla, urna nisi tincidunt turpis, in ullamcorper dolor dui eget lectus. Nullam sit amet leo eleifend, tempus tortor ac, accumsan sapien.

Nunc consequat odio vel ligula aliquam suscipit. Sed feugiat eros vel dolor ultricies, vel eleifend dui finibus. Sed nec urna eget mi accumsan eleifend. Quisque vitae ante ipsum.

In the example above, we have set the column-count to 3 and the column-gap to 20 pixels. This creates a multi-column layout with a gap of 20 pixels between columns.

Let's see another example:

Result:

Curabitur scelerisque, enim et ultrices fringilla, urna nisi tincidunt turpis, in ullamcorper dolor dui eget lectus. Nullam sit amet leo eleifend, tempus tortor ac, accumsan sapien.

Nunc consequat odio vel ligula aliquam suscipit. Sed feugiat eros vel dolor ultricies, vel eleifend dui finibus. Sed nec urna eget mi accumsan eleifend. Quisque vitae ante ipsum.

In this example, we have set the column-width to 200 pixels and the column-gap to 1em. This creates a multi-column layout with a column width of 200 pixels and a gap of 1 em between columns.