DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.
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!
Columns are implemented incorrectly. You get to choose only the minimum (not maximum) column width. The user must scroll manually from the bottom of one column of text up to the start of the next column, so reading long text is difficult.
I want the columns to change intelligently:
If there is very little text, I want one column only (of a fixed given width, and optionally centered horizontally and optionally centered vertically), until the viewport height is reached. At that point there is one column, filling the available height. Then I want two columns, the first one as high as the viewport, the second one growing as the first one did.
If the entire width of the viewport is exceeded with one or more columns, I want the same column layout continued, but with a horizontal scrollbar added.
This design supports easy reading of any text.