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