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.
- 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.
The column-count
property works only on elements whose display
property is block
or inline-block
.
Here's an example:
- CSS
- HTML
article {
column-count: 2;
}
<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>
The snippet above used the column-count
property to divide the <article>
's content into two columns.
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;
}
Use Flexbox like a pro
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.
The column-width
property works only on elements whose display
property is block or inline-block.
Here's an example:
- CSS
- HTML
article {
column-width: 70px;
}
<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>
The snippet above used the column-width
property to divide the <article>
's content into multiple columns of 70px
widths.
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:
- CSS
- HTML
article {
column-count: 2;
column-width: 70px;
}
<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>
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;
}
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.