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
widthandheightattribute). - 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 withdisplay: contents;(possibly a fine solution, but maybe destroys some semantics?) anddisplay: subgrid;(the correct solution, but low browser support). And then a technique using both, which seems to fail on us right at the end.
