The Complete Guide to CSS Multi-Column

# Multi-column containers

The basic multi-column properties are used on a single container (a block element).
In the examples that follow, the <article> element is the multi-column container.

Multi-column properties used on the container

# columns

columns is a shorthand property that sets the minimum width (column-width) and the maximum number (column-count) of columns at once.
The default value is auto, which lets the browser decide the width and number of columns; if you don't set a width or number, multi-column layout isn't applied.

1
columns:  min-width  max-count;

Here's an example without multi-column layout applied.

1
2
3
4
5
6
7
<article>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum metus lacus, at euismod diam tempus ut. Nulla rutrum neque ut est varius, at semper magna dictum. Curabitur quam sem, auctor et nisl pellentesque, vulputate blandit nunc. Maecenas pharetra tortor vel ante pellentesque mattis. Integer consectetur metus rutrum mattis consectetur. Aenean sit amet mauris enim. Quisque varius eu eros ac dapibus. Nulla finibus dictum tortor a convallis. Integer mi dolor, finibus at mi a, luctus volutpat risus. Suspendisse elit urna, malesuada ut leo eget, tincidunt tristique enim. Vestibulum aliquam aliquam dignissim. Maecenas non placerat purus, vel cursus elit.
    Etiam molestie pharetra vulputate. Nam vehicula urna velit, sit amet fermentum enim elementum in. Vivamus tempor ultrices odio nec ultricies. Suspendisse ullamcorper blandit ante, quis condimentum libero eleifend nec. Sed a lacinia magna. Nulla et tortor ipsum. Pellentesque mollis libero ac turpis faucibus, vel consequat purus pulvinar. Vestibulum vestibulum elit id luctus auctor. Vestibulum commodo ac eros et maximus.
    Sed porttitor pellentesque lectus, eu maximus erat faucibus et. Duis iaculis erat ac maximus tincidunt. Cras ornare risus libero, in efficitur ex tincidunt sit amet. Donec lacus urna, ultricies a maximus ac, rhoncus sit amet justo. Suspendisse potenti. Nam at varius leo. Nam ultricies nunc felis, non elementum ligula convallis non. Nullam nunc dolor, mollis quis dictum ac, finibus vel libero. Cras pulvinar eros sit amet orci aliquet, quis consectetur justo ornare. Nulla dignissim ac sem ac bibendum.
  </p>
</article>

1
2
3
4
5
6
7
8
9
10
article {
  width: 700px;
  height: 450px;
  padding: 20px;
  border: 1px solid;
  border-radius: 4px;
}
p {
  margin: 0;
}

Multi-column layout not applied.

Use the columns property on the container element where you want to apply multi-column layout, as follows.
Each column has a minimum width of 200px, and there are at most 3 columns.

1
2
3
4
5
6
article {
  /* ... */
  columns: 200px 3;
  /* column-width: 200px; */
  /* column-count: 3; */
}

Multi-column layout applied.

If the container's width shrinks, the number of columns adjusts to fit the minimum width of each column.
Note that the element's height must be large enough for the number of columns to adjust, so in this part only, we set the height property to its default value (auto).
The default value of the height property, which sets the element's height, is auto, and the height can change to fit the size of the content.

1
2
3
4
5
6
7
article {
  width: 700px;
  /* height: 450px; */
  padding: 20px;
  border: 1px solid;
  border-radius: 4px;
}

When the container is 500px wide.

When the container is 300px wide.

# column-width

An individual property of columns that sets the minimum width each column can shrink to.
If a column would become narrower than the minimum width within the element's width, the number of columns changes automatically.

1
2
3
4
article {
  /* ... */
  column-width: 200px;
}

# column-count

An individual property of columns that sets the maximum number of columns to divide the element's content into.
The optimal number of columns changes automatically based on the specified minimum column width (column-width).

1
2
3
4
article {
  /* ... */
  column-count: 3;
}

# column-gap (gap)

Sets the gap between columns in a multi-column layout.
The default gap is proportional to the font size.

1
2
3
4
5
6
article {
  /* ... */
  column-gap: 30px;
  /* gap: 30px; */
  /* gap: 0 30px; */
}

With a gap set between columns.

# column-rule

Sets a divider line between columns in a multi-column layout.
The divider sits in the middle of the gap between columns.

1
2
3
4
article {
  /* ... */
  column-rule: 1px solid;
}

With a divider set between columns.

# column-rule-width

An individual property of column-rule that sets the width of the multi-column divider.

1
2
3
4
article {
  /* ... */
  column-rule-width: 1px;
}

# column-rule-style

An individual property of column-rule that sets the style of the multi-column divider.

1
2
3
4
article {
  /* ... */
  column-rule-style: solid;
}

# column-rule-color

An individual property of column-rule that sets the color of the multi-column divider.

1
2
3
4
article {
  /* ... */
  column-rule-color: red;
}

# column-fill

The column-fill property sets whether content is balanced across the columns or filled in sequence.

When the element's height (height) is set, space may be left at the bottom by default, because the content is balanced (balance) across the columns.

Content is balanced across the columns.

If you want to simply fill the columns in sequence instead of balancing the content, you can use the auto value.

1
2
3
4
article {
  /* ... */
  column-fill: auto;
}

Content fills the columns in sequence, starting from the first column on the left.

# Multi-column items

A container with multi-column layout applied can have several elements as its content (children).
All the properties we'll look at from here on are used on the content elements, not on the container.

# column-span

You can make an element span across all columns.
It can be used to display the title of a multi-column area.

The multi-column area in the following example has an <h2> element for the area's title and <h3> elements for subheadings of parts of the content, and each paragraph is a <p> element.
The title and paragraphs flow through the columns in order.

1
2
3
4
5
6
7
8
9
10
11
12
13
<article>
  <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum metus lacus, at euismod diam tempus ut.</p>
  <p>Nulla rutrum neque ut est varius, at semper magna dictum. Curabitur quam sem, auctor et nisl pellentesque, vulputate blandit nunc.</p>

  <h3>Aenean sit amet.</h3>
  <p>Maecenas pharetra tortor vel ante pellentesque mattis. Integer consectetur metus rutrum mattis consectetur.</p>
  <p>Aenean sit amet mauris enim. Quisque varius eu eros ac dapibus. Nulla finibus dictum tortor a convallis. Integer mi dolor, finibus at mi a, luctus volutpat risus. Suspendisse elit urna, malesuada ut leo eget, tincidunt tristique enim. Vestibulum aliquam aliquam dignissim. Maecenas non placerat purus, vel cursus elit.</p>

  <h3>Vivamus tempor.</h3>
  <p>Etiam molestie pharetra vulputate. Nam vehicula urna velit, sit amet fermentum enim elementum in. Vivamus tempor ultrices odio nec ultricies. Suspendisse ullamcorper blandit ante, quis condimentum libero eleifend nec. Sed a lacinia magna. Nulla et tortor ipsum.</p>
  <p>Pellentesque mollis libero ac turpis faucibus, vel consequat purus pulvinar. Vestibulum vestibulum elit id luctus auctor. Vestibulum commodo ac eros et maximus.</p>
</article>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
article {
  width: 700px;
  height: 400px;
  padding: 20px;
  border: 1px solid;
  border-radius: 4px;
  column-width: 200px;
  column-count: 3;
  column-gap: 30px;
  column-rule: 1px solid;
  column-fill: auto;
}
h2 {
  margin: 0;
  padding-bottom: 10px;
}
h3 {
  margin: 0;
  padding: 10px 0 5px;
}
p {
  margin: 0;
}

Multi-column structure without a spanning title (none)

If you want to emphasize the area's title even more, you can create a title that spans all columns, as follows.
Use the column-span: all; property on that heading element.

1
2
3
4
h2 {
  /* ... */
  column-span: all;
}

Multi-column structure with a spanning title (all)

# break-before

You can break to the next column at the start (before) of an element.
By default, auto behaves like avoid.

Each subheading breaks to the next column at its start.
The red line marks where the break happens.

1
2
3
4
5
h3 {
  /* ... */
  border-top: 1px solid red;
  break-before: column;
}

Each subheading breaks to the next column at its start.

# break-after

You can break to the next column at the end (after) of an element.

The red line marks where it breaks to the next column.

1
2
3
4
5
h3 {
  /* ... */
  border-bottom: 1px solid red;
  break-after: column;
}

Each subheading breaks to the next column at its end.

# break-inside

You can set whether an element can break to the next column inside it.
By default, breaks inside an element are allowed.

In the following example, red borders are used to show the areas of the subheadings and paragraphs.
The 4th and 5th paragraphs in the example each break across to the next column.

1
2
3
4
5
6
7
8
9
10
11
12
/* ... */
h3 {
  margin: 0;
  padding: 10px 0 5px;
  border: 1px solid red;
  /* border-bottom: 1px solid red; */
  /* break-after: column; */
}
p {
  margin: 0;
  border: 1px solid red;
}

Breaks are allowed inside the content.

If you don't want each paragraph to break between columns, you can disallow breaks inside the element, as follows.
Then, if an element can't be displayed without a break, it's displayed in the next column.

1
2
3
4
5
/* ... */
p {
  /* ... */
  break-inside: avoid;
}

Breaks are not allowed inside the content.