Skip to main content

CSS Multi-Column Layout – How to Create Multicol Elements

The CSS multi-column layout module makes browsers display content in multiple columns, just like how text flows in newspapers.

note
  • We sometimes call multi-columns "multicols."
  • Multicols are anonymous column boxes.

You can use the column-count or column-width CSS properties to convert a regular block element to a multi-column container.

Let's discuss the two properties below.

What Is a CSS column-count Property?​

column-count specifies the number of columns browsers should divide the selected block element's content.

note

The column-count property works only on elements whose display property is block or inline-block.

Here's an example:

article {
  column-count: 2;
}

Try it on StackBlitz

The snippet above used the column-count property to divide the <article>'s content into two columns.

Buy CSS Grid book

You can use the CSS columns property as a shorthand for column-count. In other words, instead of:

article {
  column-count: 2;
}

You can alternatively use the columns property to shorten your code like so:

article {
  columns: 2;
}

What Is a CSS column-width Property?​

column-width tells browsers to divide the selected block element's content into as many columns as the specified width can fill.

note

The column-width property works only on elements whose display property is block or inline-block.

Here's an example:

article {
  column-width: 70px;
}

Try it on StackBlitz

The snippet above used the column-width property to divide the <article>'s content into multiple columns of 70px widths.

info

The columns may become wider than the specified width because browsers will distribute the container's extra space between the columns. Therefore, it's best to consider the column-width property as "minimum column width."

You can use the CSS columns property as a shorthand for column-width. In other words, instead of:

article {
  column-width: 70px;
}

You can alternatively use the columns property to shorten your code like so:

article {
  columns: 70px;
}

Defining Both the column-count and column-width Properties​

Suppose you defined both the column-count and column-width properties on a multi-column container. In that case, browsers will read column-count as the maximum number of columns into which they can divide the container's content.

Here's an example:

article {
  column-count: 2;
  column-width: 70px;
}

Try it on StackBlitz

In the snippet above, though the <article> has room for more than two columns, the column-count declaration limited it to two.

You can use the CSS columns property as a shorthand for column-count and column-width. In other words, instead of:

article {
  column-count: 2;
  column-width: 70px;
}

You can alternatively use the columns property to shorten your code like so:

article {
  columns: 2 70px;
}
info

Browsers read an integer value as column-count and a length unit as column-width.

How to Style CSS Multi-Columns​

There is currently no way to style the column boxes that make up a multi-column layout.

We cannot style column boxes because they are anonymous, and we currently have no way to target anonymous items. Therefore, you cannot specify a column box's background color, size, or border style.

However, you can use the column-gap, column-rule, and column-span properties to style the gaps between the columns.

Overview​

This article discussed what a CSS multi-column layout module is. We also discussed how to create multicols.

Tags:
Last updated on by Oluwatobi Sofela