Holy Grail CSS Columns Using the Flexible Box Model

CSS Columns In Safari

The A List Apart Article about Holy Grail Columns is still a great resource for building columns where the main content is first in the source, but everything lays out and remains flexible.

However, after reading about the Flexible Box Layout Module and looking through some examples I figured it would be easy to do the same without using floats and all that crap that was never intended for columns anyway. I was right.

Here is a demo

It is terribly easy to setup.

First, just tell the wrapper div that it's to behave like a box and that it's children should layout horizontally:

#columns {
  display: box;
  box-orient: horizontal;
}

Note: I am not showing the -moz and -webkit prefixes, but they are included in the demo page's code.

Secondably, let's make sure my columns show up in the correct order:

#center { box-ordinal-group: 2; }
#left { box-ordinal-group: 1; }
#right { box-ordinal-group: 3; }

That's freaking simple. Thirdly, let's add some width's to the left and right:

#left { width: 200px }
#right { width: 150px }

And lastly, let's make the center column "flexible":

#center { box-flex: 1; }

And that's it. Take a look at the demo.