A CSS grid system utilizing inline-blocks that supports vertical and horizontal alignment.

I have been doing research on CSS frameworks recently for some prototyping I’m planning at work. I’m surprised to find that modern frameworks still rely very heavily on CSS floats for column layout. There’s nothing wrong with that, but it seems like a hold-over from the bad-old days of supporting Internet Explorer 6.

Floats work fine for layout but they aren’t very flexible. In a grid system using floats, every grid row must be ‘full’ in order to work correctly. For example if your grid system uses 12 columns per row or section and you want to center 5 columns on a given row, you’re out of luck. You have to write a custom style rule, or you have to make the element 6 columns wide and add a 3 column spacer to one side. The spacer might be an empty column or an additional CSS class, but whatever it is, it’s extra.

Floated elements all vertically align to the current top line in a given block or row. There’s no simple way to vertically center or bottom-align float-based grid columns.

So I got to wondering: why don’t we use inline-blocks for this?

The white space problem

Inline blocks can be vertically and horizontally aligned and centered within an arbitrary container. Flexible. So what’s the problem?

When an HTML element is styled to display as an inline block, it displays sort of like an inline image does, right along inside any text. White space in the text between words and the inline block shows up like the space between words. The size of the space will vary based upon the font size of the containing element.

If one is trying to use inline blocks to create a column grid, that white space will break a precise layout.

You can remove all white space in your HTML source, and that will fix the problem. But that’s crazy. You don’t have control over source output in publishing systems or when you hand your HTML off to another developer.

Some folks try adjusting the word and letter spacing properties to make the white space equal to roughly zero – but this is prone to error and might break if the user adjusts the browser’s font size.

The simplest thing to do is to place inline blocks into a containing element, set that containing element’s font size to 0px, and then reset the font size for the grid column elements within. If you’re using sane, relative typography rules, this is no problem.

html {font-size: 16px; font-size: 1em;}
.row {font-size: 0px;}
.col {font-size: 16px; font-size: 1rem;}

In this example the .col CSS class is an arbitrary grid column and .row is a container element. Note that the column rule is using a REM – root-relative EM. If REMs scare you, use pixels.

No white space, no problem

With the white space problem solved, you can vertically align your grid columns, horizontally align them, center arbitrary numbers of columns on a given row, and still support fancy-schmancy responsive designs.

I put together an example grid system to play with the concept.

This only took a few hours to knock together. It’s a simple grid, based upon a 1024px wide container, divided into 4 256px columns (24px gutter + 238px of content area). If one wanted to do the math, it should support any configuration of columns.

The design has a simple responsive stylesheet which allows the page to be read as one column on small mobile devices or portrait-orientation tablets.

Thanks to a small conditional stylesheet, this layout supports IE7+ and, of course, Chrome, Firefox, and Safari. I suppose if someone really needed to, they could create a fall-back stylesheet using floats for IE 6 users. But that would be dumb.