Skip to main content

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

Loading...

In this example:

  • We have a container div with a class of multicolumn.
  • 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 the column-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;
}