Quick Tip: The Multi-Column CSS3 Module

For over six years, CSS3 columns have been available to us; yet, strangely, they’re rarely utilized. Because they currently are only supported in Mozilla and Webkit-based browsers, this means that – again – no support in Internet Explorer. But that’s okay! The world will not end if IE users see one longer paragraph. I’ll show you how to use this helpful module in today’s video quick tip.

#container p {
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;

	-moz-column-count: 3;
	-moz-column-gap: 10px;

	column-count: 3;
	column-gap: 10px;
}

---

• column-count: The desired number of columns for the element.
• column-gap: The padding between each column.
• column-rule: The divider for each column; can be used to specify a border.
• column-width: Used to specifically state the width of each column.

Please note that we must prefix each property with the -webkit or -moz, accordingly; so: -webkit-column-count.

Do you use CSS columns in your projects? If no, why not?