CSS Multi-column Layout

CSS Multi-column Layout

CSS Multi-column Layout allows a block of content to flow automatically across multiple columns, similar to the column layout commonly used in newspapers and magazines.

You can control the number or preferred width of the columns, the space between them, decorative rules between columns, and how certain elements behave within the multi-column layout.

Creating Multiple Columns

A multi-column layout is created by applying either column-count or column-width to a container.

.article {
  column-count: 3;
}

The content inside the element flows from the top of one column into the next. You do not need to divide the content into separate HTML elements for each column.

This makes Multi-column Layout especially useful for continuous text such as articles, introductions, reference material, and other reading content.

The column-count Property

The column-count property specifies the preferred number of columns into which the content should be divided.

.article {
  column-count: 3;
}

This requests three columns. The browser determines their used width according to the available space and other multi-column settings.

The initial value is auto, which means the number of columns is determined by other properties, such as column-width.

The column-width Property

The column-width property specifies an optimal column width rather than requiring an exact number of columns.

.article {
  column-width: 220px;
}

The browser creates as many columns as can reasonably fit while using the specified value as the preferred minimum width for each column.

As the container becomes narrower or wider, the number of columns can change automatically. This makes column-width useful for responsive text layouts.

The columns Shorthand

The columns shorthand sets column-width and column-count together.

.article {
  columns: 220px 3;
}

This provides a preferred column width of 220 pixels and a preferred maximum count of three columns.

You can also provide only one value when you need to control just the width or count.

.article {
  columns: 3;
}

The column-gap Property

The column-gap property controls the space between adjacent columns.

.article {
  column-count: 3;
  column-gap: 30px;
}

The gap separates the columns without requiring margins on the content inside them.

The gap shorthand can also specify the column gap in a multi-column layout.

.article {
  column-count: 3;
  gap: 30px;
}

Column Rules

A column rule is a decorative line drawn between adjacent columns. It does not create additional space by itself and is drawn within the column gap.

.article {
  column-count: 3;
  column-gap: 30px;
  column-rule: 1px solid #999;
}

The column-rule shorthand combines three individual properties.

The column-span Property

The column-span property allows an element to span across all columns in a multi-column container.

.article {
  column-count: 3;
}
.article h2 {
  column-span: all;
}

The heading spans the full width of the multi-column container instead of appearing inside a single column.

The commonly used values are none and all. The initial value is none.

Content Flow Between Columns

Multi-column content flows sequentially from one column to the next. In a typical horizontal left-to-right writing mode, content begins in the first column and continues through the following columns.

The browser handles this fragmentation automatically. Text, headings, images, lists, and other content can move between columns as space is filled.

Unlike CSS Grid, individual columns are not separate containers that you normally place content into manually. The columns are fragments of one continuous flow of content.

Controlling Column Breaks

Break properties can influence where content is divided between columns.

.article h2 {
  break-after: avoid;
}
.article figure {
  break-inside: avoid;
}

The break-after: avoid declaration asks the browser to avoid a break immediately after the heading, while break-inside: avoid asks it to keep the figure together when possible.

Fragmentation depends on available space, so break avoidance should be treated as a request rather than a guarantee in every layout situation.

Responsive Multi-column Layouts

Using column-width allows the browser to adjust the number of columns according to the available width.

.article {
  column-width: 250px;
  column-gap: 30px;
}

A wide container may display several columns, while a narrow container may display fewer columns or a single column.

You can also use media queries when you need direct control over the number of columns at particular layout widths.

.article {
  column-count: 3;
}
@media (max-width: 700px) {
  .article {
    column-count: 1;
  }
}

Multi-column vs Grid

Multi-column Layout and CSS Grid both create columns, but they solve different layout problems.

Choose Multi-column Layout when the main goal is flowing continuous content into columns. Choose Grid when individual elements need controlled placement in rows and columns.

CSS Multi-column Example

The following example uses a preferred column width, a gap, and a column rule to create a flexible reading layout.

.article {
  column-width: 200px;
  column-gap: 30px;
  column-rule: 1px solid #999;
}

Open the example in the editor and change column-width to see how the browser adjusts the number of columns. You can also change column-gap and column-rule to see how the space between columns changes.

Drag the divider between the code and result panes to change the preview width and watch the content automatically reflow into fewer or more columns.