Diving into New CSS Layout Properties

Sometimes laying out pages in CSS can be a headache. But with these new css layout properties, creating layouts are a lot easier for web designers and developers. Here we are going to look at Multi-column Layout.

The W3C, along with most major browsers, are beginning to provide standards for some of the new layout options. And we can begin using these today. Not 2021, not six months from now. Today. The W3C considers CSS3 Multi-column Layout a Candidate Recommendation. Meaning, they are okay with browsers implementing it as a new feature. Great!

However, there are other specs that have not yet been blessed with the W3C stamp of approval. But that doesn’t mean that they are totally off limits. We can use vendor prefixes to implement these new properties in a standards process. Of course, these properties should be used with caution, and only when the project calls for it. As always, use your best judgement whenever implementing something new.

Vendor prefixes give web designers the chance to start using new features, and help push new technology forward. The more we use these prefixes, the sooner browser developers will start implementing them. But we must use them the right way! Which means not only using Webkit-only solutions, that break standardisation. But that is a topic for another day. For more info about vendor prefixes and how to use them, check out Pre-Fixe The Web and Bruce Lawson’s Blog – There is much controversy on this topic. So you may want to read .Net’s article on the topic as well.

Multi-column

The first layout feature we will talk about is the Multi-column Layout Module. With this feature we can lay out columns on a web page without using floats and positioning. So, maybe you want a selector with a column-width of 15 ems and you want the browser to display as many columns as the space allows, you can:

#example { column-width: 15em; }

Super easy huh? You can also set a fixed number of columns, evenly  distributed based on the width.

#example { column-count: 3; }

You may want more control over your columns. In that case, you would define the number of columns, width, the rules between columns and their styles.

#example { columns: auto 15em; /*column-count, column-width */ column-gap: 1em; column-rule: 1em solid red; }

Multi-column layout allows us to arrange text in a  “news-paper like” format by defining a width for each column, or by defining a number of columns.

Most major browser and mobile browsers are currently supporting Multi-column layout. At the time of writing, for use with Internet Explorer, you will need to use IE10 Platform Preview. www.canisuse.com is a great way to see if a spec is available, or to check browser support. Even if a feature is support, you might need to use a vendor prefixe for now.

Check out the Multi-column Layout in action: View Demo