Back to Post: Create Columns Easily With The CSS3 Muti-Column Layout Module


Example 1: Using Column-Width

The columns here are created through the column-width property, which has been set equal to 15em.

Because the column-width is set if you reduce the width of your browser the right column and then the center column will move off screen.

This suggests that column-width isn't the best way to set css columns if your layout will be flexible.

Through the column-break-before property on the <pre> tag, the code is given it's own column on the right.

The column breaks also allows us to create columns that are rather uneven in height.

The heading is allowed to span columns through the column-span property.

Though not shown here, vendor prefixes (-webkit, -moz) are needed.

html:
<div id="example-1">
  <h1></h1>
  <p></p>
  <pre></pre>
  <p></p>
</div>

css:		
#example-1 {
  column-width:15em;
  column-gap: 4em
}

#example-1 h1 {
  column-span: all
}

#example-1 pre {
  column-break-before: left;
}
		

Example 2: Using Column-Count

In this example column-count has been used to set up the multi-columns, which makes the layout more flexible.

Notice that if you resize your browser to make it narrower the width of the columns in this example continues to adjust.

The pseudo-algorithm calculates one based on the other and since the count is set, the width of the columns can adjust based on the available width.

In this example I haven't allowed the heading to span columns. Instead it remains inside the first column only.

The html in this example is the same as above. The very simple css is seen below.

#example-2 {
  column-count: 3;
  column-rule: 1px solid #ccc
}
		 

The column-rule creates the vertical lines between columns in the center of the column-gap.


A CSS3 Mutli-Column Example

This last example uses similar html as the previous examples.

Here I've given the h1 to the left a column-break-after value to force anything after it into a new column, which I think creates an interesting layout.

h1 {column-break-after: right}
		

While I've set the value to right, using left or always accomplishes the same thing.

As with the previous example the columns are created using column-count and I've increased the column-gap to 2 'em'. If you resize your browser you'll notice the widths of the columns adapt.

However, you'll also notice the headline can't adjust its size and so at a certain point part of the words are hidden as the heading is clipped.

This is a heading that won't span columns

The column-rules are dotted, just for the sake of difference.

h1 {column-rule: 1px dotted #ccc;}
		

This layout was simple to achieve and could work well for a magazine or news style site.

A little more care needs to go into placing the content on a static site as the column break is dynamic based on how much content there is to display.

This isn't necessarily a bad thing and it's something print designers have always had to consider. It's also a reason for thinking more flexibly about our designs.

This heading also won't span columns

I encourage you to play around with mutli-columns. They're easy to set up and work with. The css properties will work mostly as you'd expect.

It only took a few minutes to set up this demo page. The majority of time was spent thinking of something to say to fill up the columns with content.

Writing the code for this page was literally a few minutes at most and if you view the source code you can see how little css was necessary.

Much of the code exists due to the need to replicate the same properties with vendor prefixes.

Below is the code sans vendor prefixes. #columns is the lone id used on the containing div.

#columns {
  column-count:3;
  column-gap: 2em;
  column-rule: 1px dotted #ccc;
}

#columns h1 {
  column-break-after: right;
  font-size: 4.5em;
}

		

Back to Post: Create Columns Easily With The CSS3 Muti-Column Layout Module