column-fill

When you add height to a multi-column element, you can control how the content fills the columns. The content can be balanced or filled sequentially.

ul {
  height: 300px;
  -webkit-columns: 3;
     -moz-columns: 3;
          columns: 3;
  -moz-column-fill: balance;
       column-fill: balance;
}

This property is only available in Firefox. Firefox will automatically balance content in a height-constrained multi-column layout. The other browsers will always fill columns sequentially when given a height constraint.

To make Firefox behave like the other browsers, that is to fill columns sequentially, you can set column-fill: auto.

Values

column-fill accepts the keyword values balance and auto.

balance will fill each column with about the same amount of content, but will not allow the columns to grow taller than the height. You might find that the columns will come up shorter than the height as the browser distributes the content evenly horizontally.

auto will fill each column until it reaches the height and do this until it runs out of content. Given the content, this value will not necessarily fill all the columns nor fill them evenly.

It’s kind of like pouring juice into glasses. You can pour an equal amount of juice into each glass and find that you don't fill each glass to the top (balance). Alternatively, you can fill a glass to the top until it's full and repeat this until no juice is left. As a result, the remaining glasses may have less or no juice (auto).

See the Pen column-fill example [CSS-Tricks] by CSS-Tricks (@css-tricks) on CodePen.

Related Properties

Additional Resources

Browser Support

The column-fill keyword values specifically work in Firefox. They didn't work in August 2014 when this Almanac entry was originally written, but does when tested again in August 2015 (Chrome 44). During that testing, it seems that changing the value dynamically wouldn't take, you had to force a relayout.

Browser support for multi-column layout in general:

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
    Paul Radzkov
    Permalink to comment#

    According CSS3 Spec column-fill: balance is the initial value. So Firefox the only browser that treats it right (in Sep 2015).

  2. User Avatar
    Gene Dangerfield
    Permalink to comment#

    To: Paul Radzkov and all who believe in open source and sharing. It is because of sites like this and contributors like you, Paul, who help novice web designers like myself that I a able to learn so much to improve. It is amazing the massive amount of knowledge that folks like you share. We, who want-to-be-like-you web designers just keep taking and taking (sucking up the knowledge), but I dares say you get much thanks for it. I don’t have money; all I have is my appreciation and thank you for all that you, css-tricks, and all its contributors do on sites like this one. What’s most impressive is that geeks and smart people like you defy all social stereotypes that you have no emotion. But it is just the opposite because the very act of emotion you, Paul among others herein, have demonstrated is the ability to share your knowledge so freely and unconditionally. I have been using sites like this for long enough, and I thought it about time to say thank you and all like yourself.
    Thank you so much again for all that you do.
    –Sincerely Gene Dangerfield

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-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag