With frameworks like the 960 Grid System and others floating around to make page layouts easier, there seems to be a growing emphasis on grid or column based design on the web. CSS3 is once again coming to our rescue and attempting to make things even simpler by providing a standard way of splitting up large blocks of text into columns. This is honestly one of the most useful things in the new CSS3 specification, and is guaranteed to make your life as a web designer easier. Let’s see what this new property can do.

STEP ONE:

The HTML

Our HTML page is very simple, and consists of only a paragraph and some randomly generated Lorum Ipsum text (placeholder text). Have a look at the code:

Great! Our page is set up with some dummy text, and now we can see how the CSS columns work.

STEP TWO:

The CSS

The CSS in today’s tutorial is also fairly uncomplicated, and only gets a bit convoluted thanks to the browsers all having their own specific prefix for the column specification. Peek at the CSS, and then I’ll go into further detail, and we’ll add a few more features as well:

Now, if you load up the HTML file into a browser, you’ll see that the large chunk of text has been split into three very lovely columns. In our CSS, we first specified the column count. This is pretty self-explanatory, and simply sets the number of how many columns we’d like to split our text into. The next property was the column gap, which specifies how much space should in between the columns. These numbers can be changed at will to achieve the desired layout.

Next, let’s add a bit of flavor to our columns. There is another property called column-rule that allows us to add sort of a colored margin to our columns. Here’s what the CSS should look like now:

So now, we have a nice blue “barrier” between each of our columns, and all of this formatting took very little CSS.
Colored Margin

This is a very powerful feature of CSS3 and can be used to make your text more legible and your layouts more symmetrical. Experiment with the number of columns and the column-rule property until you get that perfect “griddy” look on your site. Until next time!

Download Source Files