columns

With just a few CSS rules, you can create a print-inspired layout that has the flexibility of the web. It’s like taking a newspaper, but as the paper gets smaller, the columns will adjust and balance automatically allowing the content to flow naturally.

.intro {
-webkit-columns: 300px 2;
   -moz-columns: 300px 2;
        columns: 300px 2;
}

The columns property will accept column-count, column-width, or both properties.

columns: <column-width> || <column-count>;

Using both column-count and column-width is recommended to create a flexible multi-column layout. The column-count will act as the maximum number of columns, while the column-width will dictate the minimum width for each column. By pulling these properties together, the multi-column layout will automatically break down into a single column at narrow browser widths without the need of media queries or other rules.

A multi-column layout works great on block elements including lists to make a flexible navigation.

To further fine tune your multi-column layout, use break-inside on specific elements to keep them from getting stuck between columns.

Related Properties

Additional Resources

Browser Support

Multi-column layout support:

Chrome Safari Firefox Opera IE Android iOS
Any 3+ 1.5+ 11.1+ 10+ 2.3+ 6.1+

Don't forget your prefixes!

Comments

  1. Rima
    Permalink to comment#

    Looks great, do you have any examples of this being used in the wild?

  2. Pawel

    Hi, I’m cool.

    Thanks for this helpful stuff, I like them.
    You’re cool, maaaaaaaan.

  3. Jacan Chaplais
    Permalink to comment#

    This is really useful, but does it degrade gracefully? ‘Cause IE9 seems too recent to ignore.

  4. Todd
    Permalink to comment#

    Jacan – IE9 does ‘somewhat’ gracefully at least ignore the column code and display a single column. Your options are to let that go, add a modernizer, or a conditional stylesheet to work specifically with 9 and lower.

    • Jacan Chaplais
      Permalink to comment#

      Thanks, Todd.
      I have ended up using it in one of my projects. The effect is very good, and I don’t really mind going to single column for this site. Still, IE is, as always, poopsome.

  5. Jacan Chaplais
    Permalink to comment#

    Thanks, Todd.
    I have ended up using it in one of my projects. The effect is very good, and I don’t really mind going to single column for this site. Still, IE is, as always, poopsome.

  6. Todd
    Permalink to comment#

    Indeed. Even for IE 10 and 11, I had an antecedent display: table in the css that prevented the multiple columns from dropping to one as the browser scaled down. I ended up adding media queries to reset the column number at specific break points. I certainly did not like having to do that.

  7. muphet
    Permalink to comment#

    i wish you could actually vertically align items inside colum, with code like column-margin: auto 0;

  8. TheFPVdrone.com
    Permalink to comment#

    Thank you! Worked like a charm

  9. Wojack Pepe
    Permalink to comment#

    Hi, I too am a cool.

    Good code, I know all the things about the CSS rules for this area now. Columns flowing in all directions thank you to my knew found knowledge.

    If blood must be spilled, I would greatfilly act on your behalf, friend.

  10. Henry
    Permalink to comment#

    very helpful keep it up

  11. jehzlau
    Permalink to comment#

    Is it possible to make the column width uneven? For example if I use column count 3, then I want column 1 to have 50% width, then 2 and 3 to have 25% width each. Is this possible with the column property? Or I need to use bootstrap / create my own grid?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.