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, like how text flows in newspapers.

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

CSS provides the column-count and column-width properties for converting regular block elements into multi-column containers.

Let's discuss the two properties.

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 with block or inline-block display properties.

CSS column-count property's value​

Below are some of the values a column-count property accepts:

ValueDescription
auto

Use other CSS properties, such as column-width, to determine the number of columns.

Note: auto is column-count's default value.

Positive integer

The ideal number of columns to divide the selected element.

Note: Suppose you also set column-width to a non-auto value. In that case, browsers will read column-count's integer value as "maximum number of columns."

inheritInherit the parent element's column-count value.
initialUse the default column-count value.

Example of the column-count CSS property​

article {
  column-count: 2;
}

Try Editing It

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

Shorthand for defining a column-count property​

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.

CSS column-width property's value​

Below are some of the values a column-width property accepts:

ValueDescription
auto

Use other CSS properties, such as column-count, to determine the width of columns.

Note: auto is column-width's default value.

Positive integer

The ideal width of columns to divide the selected element.

Note: 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 integer value as "minimum column width."

inheritInherit the parent element's column-width value.
initialUse the default column-width value.

Example of the column-width property​

article {
  column-width: 70px;
}

Try Editing It

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

Shorthand for defining a column-width property​

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 to divide the container's content.

Here's an example:

article {
  column-count: 7;
  column-width: 130px;
}

Try Editing It

The snippet above read the column-count declaration as a hint to the maximum number of columns it can divide the <article>.

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

article {
  column-count: 7;
  column-width: 130px;
}

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

article {
  columns: 7 130px;
}
tip

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 style the gaps between the columns using the column-gap, column-rule, and column-span properties.

Overview​

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

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Join CodeSweetly Newsletter
Tags:
Last updated on by Oluwatobi Sofela