column-width

When you want to keep your columns at a specific width, use column-width.

section {
-webkit-column-width: 200px;
   -moz-column-width: 200px;
        column-width: 200px;
}

The browser will calculate how many columns of at least that width can fit in the space. Think of column-width as a minimum width suggestion for the browser.

column-width is a flexible property. Once the browser cannot fit at least 2 columns at your specified width then the columns will stop and drop into a single column.

This property is also used in the shorthand for columns and can be used in tandem with column-count. When both properties are declared column-count is the maximum number of columns.

Values

You can set column-width to auto or a length.

Use auto if you are also using column-count or if you need to turn off the property. Think of it as a way of telling the browser to let column-count take the lead.

To specify the width of the columns, use a length greater than (or equal to) 0. You can use any CSS unit except for percentage.

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
    Michael Hanon
    Permalink to comment#

    Column width auto does not work in webkit. I did not test in FF.

    • User Avatar
      Michael Hanon
      Permalink to comment#

      Just saw the note about specifying how many columns if you use auto.

  2. User Avatar
    baudelot philippe
    Permalink to comment#

    Hi,

    In your Code pen example (http://codepen.io/katydecorah/pen/9b18945fdfdc4d508bbcc336b2034eed) there is a problem when we resize .
    Some piece of box appear on the top of few columns.
    Is there a reason ?

  3. User Avatar
    Ori Ris
    Permalink to comment#

    Multi-column layout support:
    Chrome: none!!!!

  4. User Avatar
    Marc De Gagné
    Permalink to comment#

    Put the a.tag element display to inline-block instead of block. Solved my problem on Chrome.
    Examples : http://codepen.io/mdgDesign/pen/qqLjbd
    Merci!

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