CSS Multi-Column Layout Module

CSS columns give us, the web designers the ability to flow content between multi-columns which adjusts depending on the viewport size. This module has plenty of options to produce layouts similar to print design that we see in magazines and newspapers. This post will look in depth into the module, and demonstrate a layout using both the multi-column layout and the picture element.

The Properties

Column Count

The column-count property declares that the content should be laid out in a column. The value is amount of columns you need, so column-gap property declares the amount of space between each column.
column-count

Column Rule

The column-rule is the shorthand property which sets the width, style, and color of the rule between columns. To break it down into it’s individual properties it would be:

element{
  column-rule-width;
  column-rule-style;
  column-rule-color;
}

As demonstrated by that pink line between the columns.
Screen Shot 2014-08-09 at 15.24.08

Column Span

The column-span will span the content across the amount of columns you need an example could be a header. In the case below the title is aligned centred, then spans across all three columns.

Screen Shot 2014-08-09 at 15.25.02

Media Quires

Media Quires are useful although not entirely needed, because the columns will flow naturally to the browser width there is no problem. However if you view the columns on a phone and there is 4 columns this could look very ugly. Media quires can help us out here by using something similar to @media all and (min-width: 900px) we could flick between a traditional layout and a multi-column layout. The other option is to use media quires to change based on the height as well as width, because it could be quite annoying for a user to scroll down and then back up to the top.

Demonstration

This demonstration presents the options possible using the column properties. Also I have experimented with the use of the picture element, with the that you could deliver a layout suitable for most devices. The picture element works in a small amount of browser versions.

See the Pen Columns by Michael Gearon (@michaelgearon) on CodePen.

Browser Support

Browser support is good for CSS3 multiple columns layout:
Internet Explorer: 10+
Firefox: All versions using the prefix -moz-
Chrome: All versions using -webkit-
Safari: All versions using -webkit-
Opera: All versions using -webkit-
Link to Can I Use

Conclusion

Multi-column layout helps web designers produce print layouts with an extensive list of properties. The problem of responsive design and making it look good on all devices can be fixed using media quires, and support across browsers is good. I personally think this module is an exciting part of CSS3, do you agree? Please share, and drop a comment as well, thanks!

Further Reading

Link to W3C
Link to W3schools

Written by Michael Gearon

Michael Gearon is a UX Designer at BrandContent. Specialising in voice assistants and CRO, I have a wealth of experience in UX, UI and website design. Based in Cardiff, South Wales Mike can help local businesses with their online presence.