There is a display property that goes hand-in-hand with CSS grid:
display: contents. With this property you can keep good HTML semantics when using CSS grid. Let's see how.
2 min read
By Sondre Kongsgård
December 11, 2019
Let's say you're writing a blog, and want an overview page of all the posts you've written. You might choose the following markup:
<section> <h1>My Awesome Blog</h1> <article> <h2>Title #1</h2> <p>Ingress #1</p> </article> <article> <h2>A title that spans multiple lines</h2> <p>Ingress #2</p> </article> <article> <h2>Title #3</h2> <p>Ingress #4</p> </article> <article> <h2>Title #4</h2> <p>Ingress #4</p> </article> </section>
If you want to present this in e.g. a two-column layout, a good choice would be to set
display: grid on the section tag:
However, you might stumble into a challenge if you also want both the title and the ingress of each article to align nicely with each other. In that case it might be tempting to remove the
<article> tag from the markup, but instead you may simply add
display: contents on this tag, along with some extra CSS to specify the flow of the elements in the grid:
See how Ingress #1 is now vertically aligned with Ingress #2? 🤩
When the display property
display: contents is added to the
<article> tag, the
p elements act as if they were direct children of the grid.
So next time you're working with CSS grid, see if you can utilize its companion
display: contents to get the grid just the way you want it - while keeping the HTML semantics in tip-top shape.
display: contents also enables you to use CSS grid with tables, which potentially gives you superpowers over the common
table-layout: fixed approach (see the link "Flexible data tables" for an in-depth blog post). Here is a simple example: