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. User Avatar
    Rima
    Permalink to comment#

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

  2. User Avatar
    Pawel

    Hi, I’m cool.

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

  3. User Avatar
    Jacan Chaplais
    Permalink to comment#

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

  4. User Avatar
    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.

    • User Avatar
      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. User Avatar
    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. User Avatar
    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. User Avatar
    muphet
    Permalink to comment#

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

  8. User Avatar
    TheFPVdrone.com
    Permalink to comment#

    Thank you! Worked like a charm

  9. User Avatar
    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. User Avatar
    Henry
    Permalink to comment#

    very helpful keep it up

  11. User Avatar
    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?

    • User Avatar
      Andre
      Permalink to comment#

      Or you can just use flexbox.

      .parent {
      display:flex;
      }
      .first-column {
      flex-grow: 2;
      }
      
      

      Cheeers

  12. User Avatar
    brundonsmith
    Permalink to comment#

    I don’t fully understand the need for this property when flexbox exists, other than not having to write quite as much code.

    • User Avatar
      brundonsmith
      Permalink to comment#

      i.e.

      .container {
        display:flex;
        flex-direction:column;
        flex-wrap:wrap;
        justify-content: flex-start;
      }
      .container > .item {
        min-width: 300px;
      }
      

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag