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:

<div id="css-grid-table">
	<dl>
		<dt>Who
		<dd>Lorem ipsum dolor sit amet…
	</dl>
	<dl>
		<dt>What
		<dd>Vivamus quis mauris nec massa interdum ullamcorper sed in lacus…
	</dl>
	<dl>
		<dt>Where
		<dd>Vivamus quis mauris nec massa interdum ullamcorper sed in lacus…
	</dl>
</div>

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

#css-grid-table {
	padding: 3%;
	display: table;
}
#css-grid-table dt {
	background: #000;
	color: #fff;
	font-family: Gill Sans, sans-serif;
	text-transform: lowercase;
	font-size: 4rem;
	text-indent: 1rem;
	font-weight: 100;
	vertical-align: middle;
	display: table-row;
	width: 100%;
	height: 12rem;
}
#css-grid-table dd {
	padding: 1rem;
	padding-top: 3rem;
	font-family: Arno Pro, sans-serif;
	display: table-row;
	font-size: .9rem;
	color: #666;
}
#css-grid-table dd p { 
	margin-top: 3rem;
}

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

#css-grid-table dl {
	display: table-cell;
	width: 31%;
	float: left;
	margin-right: 3%;
}
#css-grid-table dl:last-child {
	margin-right: 0;
}

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.