Introduction to CSS Multiple Columns
CSS Multiple Columns
CSS multiple columns is a technique used to divide text into multiple columns on a web page. It's commonly used to improve the readability of long blocks of text, especially on larger screens.
As an example:
Editor
In this example:
- We have a container
div
with a class ofmulticolumn
. - Inside this container, we have multiple
p
tags with some sample text. - In CSS, we apply styles to the
multicolumn
container to create two columns using thecolumn-count
property. - We've also added a
column-gap
property to create some space between the columns.
CSS Multi-column Properties
CSS multi-column properties are used to create multiple columns of content within a single container element.
Here are some of the most commonly used CSS properties for creating multi-column layouts:
The column-count
This property defines the number of columns that should be created within the container element. The value for this property is an integer greater than or equal to 1.
As an example:
.container {
column-count: 3;
}
The column-width
This property specifies the width of each column. The value can be either a length (e.g. 200px) or a percentage (e.g. 33%).
As an example:
.container {
column-width: 200px;
}
The column-gap
This property sets the space between columns. The value can be any valid CSS length unit (e.g. px, em, rem).
As an example:
.container {
column-gap: 20px;
}
The column-rule
This property is used to add a vertical line between columns. The value can be a CSS length unit (e.g. 1px), a color (e.g. red), or a style (e.g. dotted).
As an example:
.container {
column-rule: 1px solid #ccc;
}
The column-span
This property specifies how many columns an element should span. The value can be either all or a positive integer.
As an example:
.item {
column-span: all;
}
The break-before
and break-after
These properties allow you to control where columns break. The values can be always
(break before or after the element), avoid
(don't break before or after the element), left
(break before and start a new column on the left), or right
(break before and start a new column on the right).
As an example:
.item {
break-before: always;
break-after: avoid;
}
The column-fill
This property specifies how content should be distributed across columns. The value can be balance
(distribute content evenly across columns), or auto
(let the browser determine how to distribute content).
As an example:
.container {
column-fill: balance;
}
The column-break-inside
This property specifies how an element should be divided between columns. The value can be auto
(let the browser decide), avoid
(prevent the element from being divided), avoid-page
(prevent the element from being divided across page breaks), or avoid-column
(prevent the element from being divided across column breaks).
As an example:
.item {
column-break-inside: avoid;
}
The columns
This property is a shorthand for setting column-width
, column-count
, and column-gap
properties.
As an example:
.container {
columns: 3 200px 20px;
}