Another aspect of the meyerweb redesign I’d like to explore is the way I’m using CSS Grid rows to give myself more layout flexibility.

First, let’s visualize the default layout of a page here on meyerweb. It looks something like this:

So simple, even flexbox could do it! But that’s only if things always stay this simple. I knew they probably wouldn’t, because the contents in those two sidebars were likely to vary from one part of the site to another—and I would want, in some cases, for the sidebar pieces to line up vertically. Here’s an example:

That’s the basic layout of archive pages. See how the left sidebar’s Archives lines up with the top of the Feeds box in the right sidebar? That’s Grid for you. I thought about lumping the Feeds and Categories into a the same grid cell (thus making them part of the same grid row), which would have meant wrapping them in a <div>, but decided keeping them separate allows more flexibility in terms of responsive rearrangement of content. I can, for example, assign the Feeds to be followed by Archives and then Categories at mobile sizes. Or to reverse that order.

#link #grid #grid-template-columns #grid-template-rows