Let’s look at a typical grid-based layout and see how it could be efficiently presented using variants on display: table.

In this case, we have three independent columns of text with headings of “who”, “what” and “where” at the top. While there are a few possibilities for marking up this content, I would suggest that a definition list would be the most appropriate. “who”, “what” and “where” are definition terms, with the text underneath being definition declarations. Each <dt> and <dd> pair will be marked up as a separate definition list, for reasons that will become apparent in a moment:

1. <dl>
2. <dt>Who</dt>
3. <dd>Lorem ipsum dolor sit amet…</dd>
4. </dl>
5. <dl>
6. <dt>What</dt>
7. <dd>Vivamus quis mauris nec massa interdum ullamcorper sed in lacus…</dd>
8. </dl>
9. <dl>
10. <dt>Where</dt>
11. <dd>Vivamus quis mauris nec massa interdum ullamcorper sed in lacus…</dd>
12. </dl>

First, our basic CSS. Note that we have entered the content of our definition terms capitalized, and correct this in our CSS.

1. dt { background: #000; colour: #fff; height: 4em;
2. font-family: "Gill Sans"; text-transform: lowercase; font-size: 4em; }
3. dd { padding: 1em; font-family: "Arno Pro"; }

We want each definition list to be presented as a table cell, in the same implied row:

1. dl { display: table-cell; }

There are a few problems with this. First, the implied table is perfectly fluid, which is unlikely to be what you want. Also, there is no space between each table heading at the top.

1. dl { display: table-cell; width: 20em; border-spacing: 1.5em; min-width: 20em; }
2. dt { background: #000; colour: #fff; height: 4em;
3. font-family: "Gill Sans"; text-transform: lowercase;
4. font-size: 4em; text-indent: .3em; font-weight: 100;
5. vertical-align: middle; display: table-cell; }
6. dd { padding: 1em; font-family: "Arno Pro"; display: table-row; }