CSS Multiple Columns

The CSS Multiple Columns feature helps you create content in a newspaper or magazine-style layout with multiple columns on a page. This makes your content easier to read and gives it a visually appealing flow.

Essential properties for creating multiple columns:

column-count

The column-count property defines how many columns your content will be divided into.

Example:

p { column-count: 3; }

This divides the paragraph into three columns.

column-gap

This property specifies the space between columns.

Example:

p { column-count: 3; column-gap: 20px; }

In this case, the columns will have a 20px gap between them.

column-rule-style, column-rule-width, and column-rule-color

These properties define the style, width, and color of the vertical line (column rule) that separates the columns.

Example:

p { column-count: 3; column-gap: 20px; column-rule-style: solid; column-rule-width: 2px; column-rule-color: gray; }

This example adds a solid gray rule with a width of 2px between the columns.

column-rule

Instead of specifying the style, width, and color separately, you can use the shorthand column-rule property.

Example:

p { column-count: 3; column-gap: 20px; column-rule: 2px solid gray; } column-span

The column-span property allows an element to span across multiple columns, which can be useful for creating headers or footers.

Example:

h2 { column-span: all; }

This makes the element span across all columns.

column-width

The column-width property defines the ideal width for each column. If the container’s width allows, the content will be divided into as many columns as possible with the given width.

Example:

p { column-width: 200px; }

Here, the columns will aim to have a width of 200px, and the browser will calculate how many columns fit within the container.

Request more information

CSS Multiple Columns