Tech and Media Labs
This site uses cookies to improve the user experience.




CSS Column Layout

Jakob Jenkov
Last update: 2014-10-14

From CSS 3.0 it is possible to split text into multiple columns, just like the newspapers do. CSS 3.0 comes with a set of CSS properties for column layout. I will explain these column CSS properties in this text.

column-count

The first of the CSS properties for column layout is column-count. The column-count CSS property enables you to set a number of columns that the content of an HTML element is to be divided into. Here is a column-count example:

p.twoColumns {
    column-count: 2;
}

This example sets column count to 2 for all p elements with the CSS class twoColumns.

At the time of writing, in Firefox, Chrome and Safari you had to use their special prefixes, like this:

p.twoColumns {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
}

This should make it work in Internet Explorer, Firefox, Chrome and Safari.

Here is how a p element looks with this CSS applied (plus a border to make the effect more visible):

This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.

You can also set column layout for div elements containing p elements. In that case the content will be split into paragraphs, and the paragraphs divided into columns. Thus, a column may contain less or more than one paragraph. Here is an example:

<div style="border: 1px dotted #cccccc;
    column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;">
    <p>
        This is the first paragraph. This is the first paragraph.
        This is the first paragraph. This is the first paragraph.
        This is the first paragraph. This is the first paragraph.
        This is the first paragraph. This is the first paragraph.
    </p>
    <p>
        This is the second paragraph. This is much shorter than
        the first paragraph.
    </p>
</div>

Here is how that looks in the browser:

This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph.

This is the second paragraph. This is much shorter than the first paragraph.

Notice how the two paragraphs are divided into the columns as if they were part of one, long text. Notice also how the margins of the p elements make the column layout look a bit weird. You can change that by changing the margins for the p element.

column-width

Instead of setting an explicit column count you can set a column width instead. The browser will then create as many columns of that width which can fit into the element. Here is an example:

p.columnWidth {
    column-width: 150px;
}

This example divides the content of all p elements with the CSS class columnWidth into 150 pixel wide columns. The number of columns will depend on the width of the p elements.

Again, you will have to use the -webkit- and -moz- prefixes to get it to work in Firefox, Chrome and Safari:

p.columnWidth {
    column-width: 150px;
    -moz-column-width: 150px;
    -webkit-column-width: 150px;
}

Here is how a p element looks with these styles applied:

This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.

Combining column-count and column-width

If you set both column-count and column-width for an HTML element, then column-width changes meaning to "minimum column width", and column-count changes meaning to "maximum column count". Let me explain this rule via an example.

If you set a column-width of 200px and a column-count of 3, then the browser will create columns with a minimum width of 200 pixels until a maximum of 3 columns. Once there are 3 columns, the browser will just expand the 3 columns to fit the space available.

column-gap

The column-gap CSS property enables you to specify the gap between columns. Here is an example:

p.columnGap {
    column-count: 2;
    column-gap  : 3em;
    -moz-column-gap  : 3em;
    -webkit-column-gap  : 3em;
}

This example sets the column gap to 3em which is 3 times the default column gap. Here are two columns with different gaps, so you can see how column-gap works:

This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.

This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.

Notice how the gap is bigger between the 2 columns in the second example. This example uses a column gap of 3em instead of the standard of 1em.

column-rule

The column-rule CSS property enables you to draw rulers (borders) between columns. The column-rule CSS property takes the same values as the border CSS property. Here is an example:

p.columnRule {
    column-count: 2;
    column-rule  : 1px solid #cccccc;
    -moz-column-rule  : 1px solid #cccccc;
    -webkit-column-rule  : 1px solid #cccccc;
}

Here is how the column-rule example looks when applied to a p element:

This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.

Notice there is a border between the columns.

Like with the border property you can also use the column-rule-width, column-rule-style and column-rule-color CSS properties in case you want to set these parameters individually, instead of setting them all via the column-rule CSS property. Remember to use the browser prefixes!

column-span

The column-span CSS property can be used to allow an element to span across multiple columns, just like with the colspan attributes in HTML tables. This can be desirable for e.g. h2 elements or img elements. At the time of writing the column-span CSS property worked in Internet Explorer (11), Chrome and Safari, but not in Firefox (31).

The column-span CSS property can take one of two values:

  • 1
  • all

The value 1 means that the element spans one column. The value all means that the element spans across all columns.

Here is a column-span example:

<div style="column-count: 4; -moz-column-count: 4; -webkit-column-count: 4;">
    <h2 style="column-span:all; -moz-column-span: all; -webkit-column-span: all;">
      This is a long headline which spans across multiple columns
    </h2>

    <p>
        This is a long, long, text.
        This is a long, long, text.
        This is a long, long, text.
        This is a long, long, text.
        This is a long, long, text.
    </p>
</div>

Here is how this example looks in the browser (with a gray border added):

This is a long headline which spans across multiple columns

This is a long, long, text. This is a long, long, text. This is a long, long, text. This is a long, long, text. This is a long, long, text.

Breaking Elements Into Multiple Columns

Sometimes an element, like a ul element (list), or headline might be broken into multiple columns. For instance, if a longer list is located at the bottom of a column, the browser might attempt to display part of the list in the first column, and part of the list in the next column.

You can tell the browser if it is allowed to break an element, and how using these three CSS properties:

  • break-inside
  • break-before
  • break-after

break-inside

The break-inside CSS property tells the browser whether it is allowed to break an element into multiple columns. The break-inside CSS property can accept the following values:

  • auto
  • avoid

The value auto allows the browser to decide if an element should be broken into multiple columns. The value avoid tells the browser not to break an element into multiple columns.

break-before + break-after

The break-after CSS property specifies whether the browser is allowed to break before or after the element. These two CSS properties take one of these values:

  • auto
  • avoid
  • column

The value auto allows the browser to decide where to break the element.

The value avoid tells the browser not to break immediately before or after the element (depending on whether you set break-before or break-after to avoid).

The value column forces a break immediately before or after the element (depending on whether you set break-before or break-after to column).

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC