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!
Column width auto does not work in webkit. I did not test in FF.
Just saw the note about specifying how many columns if you use auto.
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 ?
Multi-column layout support:
Chrome: none!!!!
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!