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 {
columns: 300px 2;
}The columns property will accept column-count, column-width, or both properties.
columns: || ;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
More information
- CSS Multi-column Layout Module Level 1 (Working Draft)
- MDN Documention
Browser support
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10+ | All | 9+ | 50+ | All | 11.5+ |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| All | All | All | All | All |
Looks great, do you have any examples of this being used in the wild?
Late to the party I know but the new Codepen Spark page is using it in its grid, with great results!
Hi, I’m cool.
Thanks for this helpful stuff, I like them.
You’re cool, maaaaaaaan.
This is really useful, but does it degrade gracefully? ‘Cause IE9 seems too recent to ignore.
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.
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.
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.
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.
i wish you could actually vertically align items inside colum, with code like column-margin: auto 0;
Thank you! Worked like a charm
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.
very helpful keep it up
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?
Or you can just use flexbox.
Cheeers
I don’t fully understand the need for this property when flexbox exists, other than not having to write quite as much code.
i.e.
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.
Column alignment issue in chrome https://jsfiddle.net/uydovLbx/ works fine in FF and IE
Super late to the party.. Slightly confused. Flexbox, grid and columns. Are there any comparison articles?
Hey Pravin! Really good question. I can’t think of any articles off the top of my head, but hopefully I can help explain a bit and point to some other explanations.
CSS columns are a visual way to flow content from one column to the next, determined by the number of columns defined by the
columnsproperty. So, if you were to put 3 columns on an element, then it’s children elements would be distributed into those columns.Flexbox can create columns, but it’s more about making flexible boxes that run either vertical or horizontal and fill the available space based on the Flexbox properties. So, yeah, can look like columns (or rows), but it’s really how Flexbox is calculating the size of each flexible box to fill space.
Grid creates true columns and rows by establishing track lines and placing elements within them. Chris recently posted a nice comparison between Grid and Flexbox… and the differences, though somewhat nuanced, become much more clear once you dig into them.
There’s a lot more to than this, as you might imagine, but hopefully this helps at least scratch the surface and gets you pointed in the right direction. Might even be worth a post!
Hi, I am in need of advice,
CSS Columns is giving tough time for Chrome and Safari browsers. following are the issue.
1. Columns having a iframe of embed videos are disappearing (reported to chrome team) https://www.codeply.com/p/vVorXVNYX6
2. Spanned column above getting another column of below spanned column height(https://ibb.co/kq1fWfQ)