With CSS columns you can create a print-inspired layout with little added markup that can adapt beyond a fixed canvas. A supported browser will make calculations to wrap and balance content into tidy columns. If you’re already working with a fluid layout, the columns will reflow automatically. With the right combination of properties, CSS columns can be an interesting layout option that is responsive-friendly while degrading gracefully.
Where to declare columns
You can declare columns on any block level element. Columns can be applied to a single element or applied to multiple elements by targeting their parent.
In the image below, the left side depicts CSS column rules being applied to the second paragraph to transform just that content into columns. The right side depicts the rules being applied to a container element such as a <div></div>
or <article></article>
to transform the elements into a multi-column layout.
How to declare columns
There are three different ways to declare columns:
- Declare
column-count
. - Declare
column-width
. - Declare both (recommended).
Let’s explore the different ways to declare columns.
1. Declare column-count
Use column-count
to declare the number of columns.
article {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
Live Demo
See the Pen [2] CSS Columns, count-count by Katy DeCorah (@katydecorah) on CodePen.
The number of columns remains consistent even as the browser width changes as demonstrated in the gif below.

2. Declare column-width
Use column-width
to declare the width of the columns.
The specified value is not an absolute value, but rather a minimum width. Given the column-width
, the browser will decide how many columns of at least that width can fit in the space. The browser will also take into account the gutter, or gap between columns in this calculation (more on that later). Then the browser will expand the columns to evenly distribute to fill the width of the container.
For example, if you inspect the paragraph in the live demo below, you will find that the width of the column is actually greater than 150px, which is the set value of column-width
.
article {
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
}
Live Demo
See the Pen [3] CSS Columns by Katy DeCorah (@katydecorah) on CodePen.
Once the browser cannot fit at least two columns as wide as the column-width
then no columns will appear and the layout will return to a single column layout.
The gif below demonstrates how the columns release as the browser width narrows. Unlike column-count
this property is inherently responsive.

3. Declare both (recommended)
Use column-count
and column-width
together for the best control over CSS columns. You can declare each property or use the shorthand columns
.
When both properties are declared, column-count
is the maximum number of columns and column-width
is the minimum width for those columns.
article {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
}
/* or */
article {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}
Live Demo
See the Pen [4] CSS Columns, columns by Katy DeCorah (@katydecorah) on CodePen.
The gif below demonstrates how using column-count
and column-width
together respond as the browser width narrows.

Customizing columns
There are several properties to further customize CSS columns.
column-gap
To adjust the gutter, or the space between columns, declare column-gap
.
For most browsers, the default for column-gap
is 1em. You can declare a new value as long as it’s greater than or equal to 0.
article {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
-webkit-column-gap: 4em;
-moz-column-gap: 4em;
column-gap: 4em;
}
Live Demo
See the Pen [5] CSS Columns, column-gap by Katy DeCorah (@katydecorah) on CodePen.
The browser will make necessary calculations to evenly space and balance the columns despite a larger gap.
The gif below demonstrates how the browser releases the columns and drops the gap when the browser width narrow.

column-rule
To add a vertical line between each column, declare column-rule
.
This property is the shorthand for column-rule-width
, column-rule-style
, column-rule-color
. The shorthand follows the same styling pattern as border
.
article {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
-webkit-column-gap: 4em;
-moz-column-gap: 4em;
column-gap: 4em;
-webkit-column-rule: 1px dotted #ddd;
-moz-column-rule: 1px dotted #ddd;
column-rule: 1px dotted #ddd;
}
Live Demo
See the Pen [6] CSS Columns, column-rule by Katy DeCorah (@katydecorah) on CodePen.
Like column-gap
, the vertical line will exit once the browser width is too narrow as demonstrated in the gif below.

column-span
To break the column flow temporarily, declare column-span
on a child element. Currently, Firefox does not support this feature (but you can go vote for it on Bugzilla).
The image below contains a heading that indicates the start of a new chapter in the story, but it continues with column flow.

To break the heading out of the column flow, add column-span: all
to the element. This declaration will temporarily stop the column flow to allow the element to span the columns, but will restart the columns with the next element.
h3 {
-webkit-column-span: all;
column-span: all;
}
Live Demo
See the Pen [7] CSS Columns, column-span by Katy DeCorah (@katydecorah) on CodePen.
column-fill
To change how the content fills the columns, declare column-fill
. Currently, this property is only available in Firefox.
When height is added to a columned element, Firefox behaves differently than the other browsers. Firefox will automatically balance the content, while the other browser will fill the columns sequentially.
The image below demonstrates how Firefox behaves compared to the other browsers when height is added to a columned element.
In Firefox, you can change this behavior by declaring column-fill: auto
. This rule will make the columns fill sequentially, as shown in the live demo below.
article {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
-moz-column-fill: auto;
column-fill: auto;
height: 350px;
}
Live Demo
See the Pen [8] CSS Columns, column-fill by Katy DeCorah (@katydecorah) on CodePen.
Since a height must be declared for Firefox to enable column-fill
, the height constraint breaks the fluid pattern. The content expands horizontally because it cannot flow vertically as demonstrated in the gif below. In this case, a media query could be added to manage the height (more on that later).

The other browsers don’t support column-fill
and will fill columns sequentially when a height is declared on a columned element. It’s worth noting that when height is added to any columned element, regardless of browser or use of column-fill
, the constraint will break the fluid pattern.
Limitations
Columns can be an elegant way to deliver content, so long as the content remains readable. A multi-column layout can become difficult to read when the content overflows horizontally or the columns become taller than the viewport.
Content overflows horizontally
As shown in the column-fill
section, if height is added to a columned element, then the element will expand horizontally to fit the content. The overflow will break the layout and send users in a different direction.
Possible Solution: create a min-width
media query to declare the height rule.
In the demo below, I narrowed the browser window to find when the columns began to overflow and wrote down that number. Next, I wrote a min-width
media query using the value of when the columns overflow and moved the height rule to the media query.
article {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
-moz-column-fill: auto;
column-fill: auto;
}
@media (min-width: 500px) {
article {
height: 350px;
}
}
Live Demo
See the Pen [11] CSS Columns, column-fill height by Katy DeCorah (@katydecorah) on CodePen.
As demonstrated in the gif below, when the columns release the height rule is out of bounds and the columns flow vertically.

Columns become taller than the viewport
If your column height extends beyond the viewport then users will need to scroll to follow the column flow.
Possible Solution: create a min-height
media query to activate the columns.
In the example below, the columns will only activate if the columned element has a min-height: 400px;
. I came to this number by shrinking the browser width to the point just before the columns release. Next, I adjusted the height of the browser to find where the columns began to fall under the viewport. I used that number for the value of the min-height
media query.
@media (min-height: 400px) {
article {
-webkit-columns: 2 350px;
-moz-columns: 2 350px;
columns: 2 350px;
}
}
Live Demo
See the Pen [10] CSS Columns, vertical friendly by Katy DeCorah (@katydecorah) on CodePen.
The gif below demonstrates that the columned element must be at least 400px tall to display the content in columns.

Support
CSS columns have decent support (IE10+) and still require prefixes on all properties. Find out more details about the multi-column properties on Can I Use….
Even if your favorite browser doesn’t support multi-column layouts, keep in mind that they degrade gracefully into a single column layout. CSS columns are like the escalators of content delivery (as so eloquently put by Mitch Hedberg):
A multi-column layout cannot break, it can only become a single column layout.
This is an excellent guide, thank you.
Columns overflowing the viewport was a real concern of mine, until you showed how easily it can be overcome. For the most part too, once a screen is too small width-ways, it will almost certainly be too small height-wise too, and your media queries are a perfect compliment.
Great article! Informative and well presented. Thank you.
You can do the same sort of thing with Flexbox, like this: http://codepen.io/tjacobdesign/blog/building-flexible-layouts/
I’m super excited about these techniques. It’s going to be so nice not to have to rely on media queries for everything. :)
Awesome! Damn IE users! I can’t use these nice features cuz ppl insists on using that crap browser.
Hey Fernando, you can look into using Modernizr or CSS3PIE for CSS3 support in older versions of IE. Don’t avoid using modern standards just to accommodate old versions of IE, they will phase out eventually!
I used to like Mitch Hedberg. I still do, but I used to, too.
Forgive me if this is a rather ignorant comment… I haven’t worried about IE for awhile now and the whole “IE10+ support is acceptable” idea has me perplexed. Internet Explorer 10 is limited to users who have installed Windows 8 … anyone below 8 is stuck using 9 or lower depending on their specific version, right?
And Windows 7 still represents a massive chunk of Windows users (50% or so last I checked).
Granted all usages like this are dependent on your sites specific user-statistics… but on average it seems like accepting IE10 as ‘decent support’ is a rather narrow vision of what is acceptable.
Hey Robert, I think I probably could have used better words than “decent support.” I understand that’s a relative term. My intention in that section was to suggest that even without support those users will still be able to access the content.
Couldn’t agree more.
The agency I work for, my past jobs and myself when freelancing are always concerned about IE.
At least in Brazil, IE represents a great chunk of users. I still give support to IE7. It’s ending. Now I’m thinking about IE8-9, but I always have to check IE7 to be at least readable and have a decent navigation.
When I read that IE10 is considered decent support I get mad too. =(
Some of my clients even have IE9 but uses the compatibility mode without knowing.
Internet Explorer 10 and 11 can be installed on Windows 7 too. Maybe even IE12 will.
The problem is Windows Vista – that can’t get over IE9 – and, above all, Windows XP which is stuck with IE8.
IE10 and 11 are now auto-updates on Windows 7 for users with IE9 installed. Because it’s an auto-update, the trend is that most users greater than IE8 are on IE11 now (Vista is stuck on IE9 – but the use of IE10 is now pretty similar to the use of other auto-updating browsers: it’s low enough to be an anomaly rather than a reliable user base).
Due to the lack of popularity for Vista, IE8 remains the greater concern – but support for XP is now at an end, and a lot of corporate users are now finally moving to Windows 7 instead – where a modern browser is a minimum.
This is definitely a good period to start moving into the technology that IE8 and 9 have been holding back. Your own, specific, audience is the king for defining your support – but there’s no reason to avoid using the latest CSS and HTML features today so long as you support them with graceful degradation for users straggling behind on older tech. If you’re already building mobile-first, you’re a large part of the way there to providing a basic but usable experience on Old-IE too.
Robert, IE10 is not limited to Windows 8, both IE10 and 11 are available for Windows 7, provided you installed the service pack. I am running the latest version of IE11 on Win7. The only OS limitations for IE are: XP users are limited to IE8 max, Vista users to IE9 max.
I like where the web is going – you learn something new and awesome every day. Thanks for in-depth examples Katy :)
IE10+ is not “decent” support. I wish my audience was cutting-edge browser users. Here in corporate-ville (a popular place let me assure you) IE10 is a dream.
I’ll start using CSS columns immediately, in about 8 years.
There is an IE-10 thread above, so I’m going to bury this to keep things consolidated.
Great article. It seems something like this could be used to create great HTML emails assuming most clients will render it properly…
Would this work with older browsers? if it won’t, is there reasonable css back-up?
If a browser doesn’t support columns then the elements will just display in a normal column.
I believe there is an error. Where it says:
There is no GIF below. The picture is a repetition of the previous PNG file.
You are correct! The image is fixed now. Thanks for finding and commenting!
Thanks for this awesome tutorial. I think you should create a WordPress theme or something with all these features in it.
Now all we need is this:
-webkit-columns-flow: row;
-moz-columns-flow: row;
columns-flow: row;
To flow different height objects horizontally.
Here’s my responsive, horizontal scrolling, print column based site mockup I made a little while back.
http://ghostmounta.in/cols/
There is something wrong near the top, where (for me) it says:
“The right side depicts the rules being applied to a container element such as a
or
to transform the elements into a multi-column layout.”
I think a couple of HTML elements went missing – not escaped properly?
I think this polyfill should fix things for IE8-9 at least:
http://welcome.totheinter.net/columnizer-jquery-plugin/
Very nice, and complete so it’s useful.
Thank you, Katy ;)
Attracting the great extending comments, as should!
Awesome article
you just revolutionized all the UI design secrets for developer like me , we can do everything enterprise business logic known to men-kind on the server but it comes to CSS most of us, suck big time .. this article makes a big difference in that regard .. thanks