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:

Value	Description
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.”
inherit	Inherit the parent element’s column-count value.
initial	Use the default column-count value.

Example of the column-count CSS property

CSS

article {
  column-count: 2;
}

HTML

<article>
  Li Europan lingues es membres del sam familie. Lor separat existentie es un
  myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li
  lingues differe solmen in li grammatica, li pronunciation e li plu commun
  vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa
  continuar payar custosi traductores. At solmen va esser necessi far uniform
  grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li
  grammatica del resultant lingue es plu simplic e regulari quam ti del
  coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam
  li existent Europan lingues. It va esser tam simplic quam Occidental in fact,
  it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam
  un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es
  membres del sam familie. Lor separat existentie es un myth. Por scientie,
  musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe
  solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos
  directe al desirabilite de un nov lingua franca: On refusa continuar payar
  custosi traductores. At solmen va esser necessi far uniform grammatica,
  pronunciation e plu sommun paroles.
</article>

Try Editing It

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

CodeSweetly ads

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:

Value	Description
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.”
inherit	Inherit the parent element’s column-width value.
initial	Use the default column-width value.

Example of the column-width property

CSS

article {
  column-width: 70px;
}

HTML

<article>
  Li Europan lingues es membres del sam familie. Lor separat existentie es un
  myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li
  lingues differe solmen in li grammatica, li pronunciation e li plu commun
  vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa
  continuar payar custosi traductores. At solmen va esser necessi far uniform
  grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li
  grammatica del resultant lingue es plu simplic e regulari quam ti del
  coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam
  li existent Europan lingues. It va esser tam simplic quam Occidental in fact,
  it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam
  un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es
  membres del sam familie. Lor separat existentie es un myth. Por scientie,
  musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe
  solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos
  directe al desirabilite de un nov lingua franca: On refusa continuar payar
  custosi traductores. At solmen va esser necessi far uniform grammatica,
  pronunciation e plu sommun paroles.
</article>

Try Editing It

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

CodeSweetly ads

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:

CSS

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

HTML

<article>
  Li Europan lingues es membres del sam familie. Lor separat existentie es un
  myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li
  lingues differe solmen in li grammatica, li pronunciation e li plu commun
  vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa
  continuar payar custosi traductores. At solmen va esser necessi far uniform
  grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li
  grammatica del resultant lingue es plu simplic e regulari quam ti del
  coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam
  li existent Europan lingues. It va esser tam simplic quam Occidental in fact,
  it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam
  un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es
  membres del sam familie. Lor separat existentie es un myth. Por scientie,
  musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe
  solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos
  directe al desirabilite de un nov lingua franca: On refusa continuar payar
  custosi traductores. At solmen va esser necessi far uniform grammatica,
  pronunciation e plu sommun paroles.
</article>

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.