In this article I want explore what can be achieved with the “Multi-Column Layout” module. While we can’t fully use this feature just yet, it is something we can all look forward to.

Have a look at the demo inside Firefox and Safari. Play around with the browser resolution and you will quickly see how fluid this layout is.

CLICK TO VIEW DEMO

I hope you didn’t try to view it in IE did you? Ok so we know IE doesn’t support that module currently and is something we are all waiting for. Also note that we need to use vendor specific prefixes to get this module to work in Firefox (-moz-) and Safari (-webkit-).

Here is the code that made this happen. Pay attention to how simple the markup is compared to doing it the way we’ve been doing it for years where we need to float 3 columns and balance how much text needs to be in the first column, second column, and third column. In CSS 3, all that goes away….!

HTML:

<div class="css3-columns">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div><!--close css3-columns-->

CSS:

.css3-columns {
	column-count:3;			/* this tells the browser to render 3 columns - future proof */
	column-width:10em;		/* this sets the width of each column - future proof */
	column-gap:2em;			/* this sets the spacing/gap between each column - future proof */
	-moz-column-count:3;    /* this tells the browser to render 3 columns - Mozilla specific prefix */
	-moz-column-width:10em; /* this sets the width of each column - Mozilla specific prefix */
	-moz-column-gap:2em;	/* this sets the spacing/gap between each column - Mozilla specific prefix */
	-webkit-column-count:3;	/* this tells the browser to render 3 columns - Webkit specific prefix */
	-webkit-column-width:100%; /* this sets the width of each column - Webkit specific prefix */
	-webkit-column-gap:2em;	/* this sets the spacing/gap between each column - Webkit specific prefix */
}

More Properties

Here are more properties that can be used with the Multi-Column Layout Module”.

• column-rule-color (similar to border-color)
• column-balance (balances out the columns)
• column-span (spans two or more columns)
• column-rule-style (similar to border-style)
• column-rule-width (similar to border-width)

As you can see this feature is definitely something to wait for. I hope you enjoyed this article and if you have any suggestions or feedback please comment below. Have fun!