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.