#208: A CSS Grid Layout with Pictures Down One Side Matched Up with Paragraphs on the Other

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Try Mailchimp today. MailChimp Tracking Pixel

Download Video
(Only MVP Supporters can download original high-quality recordings for offline viewing.)

This is the video version of a blog post we did asking the question: How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side?

It’s a satisfying answer because we can pull this off with simple semantic markup (really just <img> and <p> over and over) and a few lines of CSS grid. And yet! Of course, we find lots of quirks and things to figure out.

  • We go through some image best practices (gotta have that width and height attribute).
  • We look at a clever technique for testing layout sizes with a single click
  • We deal with small screen layouts.
  • We battle with how we get to keep our nice layout when extra HTML elements “get in the way.” For example, if the image and text really should be <figure> and <figcaption>, that gets tricky because the figure element “gets in the way” of the parent grid. We look at solving it with display: contents; (possibly a fine solution, but maybe destroys some semantics?) and display: subgrid; (the correct solution, but low browser support). And then a technique using both, which seems to fail on us right at the end.