In the current limbo of grid-design possibilities for web design, what solutions should we pursue? I would suggest using the properties of CSS display: table, for the following reasons:

  1. Strong, consistent support for CSS2 in all modern browsers, including IE8 (but not, sadly, IE7 or earlier, which must fall back to conditional stylesheets.
  2. Uses a reference that is already familiar to web developers.
  3. Easily hooked into semantic markup.
  4. Independent of JavaScript.

When I talk about display: table, I am referring to the family of table properties that display can be set to. These include: display: table; display: table-cell; display: table-row; display: table-caption; display: table-column, and several others. Complete coverage of all of these values would be exhaustive; for the purposes of illustration, I will stick to the most commonly-used variations.

There are a few general rules to keep in mind:

    Elements defined as display: table-cell will appear on the same (implied) row, arranged horizontally. Each implied cell will be the same height (determined by the “cell” with the greatest amount of content).
  • Elements defined as display: table-row will display on new lines.
  • Elements defined as display: table-caption will appear at the top of an implied table, by default.
  • Elements with differing display qualities can be nested inside each other, just as real tables can be nested inside table cells.

Enjoy this piece? I invite you to follow me at to learn more.