Who

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan congue arcu, ut elementum elit auctor nec. Etiam sit amet condimentum eros. Suspendisse tincidunt odio ut lectus euismod, sed scelerisque libero viverra…

What

Etiam aliquet dapibus nulla, sed varius diam. Duis imperdiet, mauris sit amet faucibus pharetra, nibh diam fermentum enim, sit amet facilisis eros mi ac sapien…

Where

Ut egestas, metus id pharetra dictum, lectus arcu hendrerit turpis, quis aliquet nisl nunc in est. Praesent et dignissim arcu…

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.