A while back CSS3 introduced a new set of properties, which are responsible for creating columns within your layout. You simple apply these to one of your elements in order to divide it up, automatically and hassle free, into a multi-column set up. This property is very easy to comprehend, set up and manipulate.
There is not much you can do with columns as the concept itself is very elementary but there are a bunch of properties that support the column creation by allowing you to manipulate different variables form column count to size, you know the basics you’d need to manipulate to get the best out of this sweet property.
Why use CSS3 columns
I have a bunch of answers as to why CSS3 columns are amazing. I will start with the fact that they are much simpler then either implementing columns manually through various div structuring or JavaScript implementation. CSS is very simple to begin with so implementing columns in your code is literally as easy as implementing borders; if you don’t’ believe me read on and try it out as I walk you through it.
If you use ems or percentages to set your column widths you will gain a fluid layout that will make your responsive design that much better. However, if you are advocating for users on outdated browsers that is fine too as columns gracefully degrade into full width divs in browsers that do not support them. (Yes, I will go over browser support a bit later.)
Lastly, there are different properties that make up CSS3 columns, which allow them to be very customizable. You can define a variety of different settings such as gutter gap, which is the space between the columns.
The various properties
I will keep this section very simple and straightforward. I will go over what all the different properties do. Once again, these properties are amazing because they provide for greater customization and control of how the columns will look.
- Column-count: specifies the amount of columns you want to divide the element into.
- Column-gap: defines the size – width – of the gap between columns
- Column-rule: [column-rule-width], [column-rule-style],[column-rule-color];
think of rule as the border you set around your columns. This particular property is shorthand for column-rule-width, column-rule-style and column-rule-color. You can specify these individually or with this shorthand. As you can guess you can define with width, colour and style of the ‘border’. - Column-span: specifies the amount of columns an element should span across such as a header spanning 2 out of 3 columns.
- Column-width: define the width of each column.
- Columns: shorthand for column-width and column-count properties [column-width], [column-count];
In order for column to work you only need to specify the column-count, which is the amount of columns, and the gap between them. The width will be generated automatically so specify that to be thorough or to accommodate for your specific design needs. Unfortunately there is no one-fits-all shorthand property like the background property; but, given that these are not that complex, it is not that big of a disappointment.
How to use these
Now that you know all about the different components of the CSS3 columns, lets create some examples.
A fixed 2-column set up:
.col2 {
column-count: 2;
column-gap: 20px;
column-width: 250px;
column-rule: 1px solid black;
}
A fluid 3-column set up:
.col3 {
column-count: 3;
column-gap: 5%;
column-width: 30%;
}
If you ever thought I was kidding about how simple this is, you’re just silly!
A great practice
A great practice is to set up different column classes that you can just add onto elements instead of applying these to individual element’s CSS rules. Basically, just create a small library within your CSS for 2 column, 3 column and 4 column needs – or more if that’s what you need. This way you can reuse these classes instead of repeating code!
Browser support
Unfortunately, like most new CSS properties, there is always a browser that will not support this new awesomeness. I have an amazing resource for you: Can I use CSS3 multiple column layout?. This is a fantastic website that provides you with a very detailed spec sheet about which browsers do in fact support CSS3 columns; it also tells you which browsers need prefixes.
In a nutshell, all current browsers actually support CSS column properties. WOAH; I know! It is amazing. Here is the breakdown: the properties are supported in IE10 and Opera with no need for prefixes. However, just about all versions of Firefox do support columns but also require the –moz- prefix. Same goes for Chrome and Safari, just about all versions do support the column properties but they all require the –webkit- prefix as of this writing.
.col2 {
-webkit-column-count: 2;
-webkit-column-gap: 10px;
-webkit-column-width: 100px;
-moz-column-count: 2;
-moz-column-gap: 10px;
-moz-column-width: 100px;
column-count: 2;
column-gap: 10px;
column-width: 100px;
}
Graceful degradation
So what happens to the layout when CSS columns are not supported? It is very simple actually When CSS columns are not working, the text is defaulted to one big and wide default single column div – as if the column properties were not there because, well, that is in fact the case. The layout is going to look differently and could be messed up actually because of this. However, nothing funny is going on so you can be worry free about that.
Conclusion
CSS3 columns are an incredible step forward in terms of layout manipulation. They make it easy to create columns for your text, and other elements too of course, that was only just a tedious and ridiculous problem beforehand. I personally love these properties because they are in fact a godsend. They allow for simple column integration, which saves time and nerves.