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;
      }
      
    • User Avatar
      txdm
      Permalink to comment#

      Brundon, from what I’ve seen, that will only work if you define a specific height limit for the container. Then the columns will appear (if needed) but they will not reflow properly when the page is made smaller…the outer container will remain its minimum width, even if it goes offscreen.

      CSS columns will always split it into the defined number of columns and will let the height be dictated by the content. It will reflow both width and height appropriately.

Submit a Comment

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.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag