Skip to content
CodeSweetly Logo CodeSweetly Logo CodeSweetly
Blog
Latest: JSX in React explained clearly without any framework

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.

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.

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.

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;
}

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.

Support CodeSweetly