On running out of grids

Something quietly excellent has happened to CSS layout in the last three years and I am not sure most of us have caught up to it yet.

When I started writing CSS for a living the layout tools were floats and tables. Then floats and a clearfix hack. Then Flexbox, which solved most one-dimensional problems and was sold as a layout system. Then CSS Grid, which is actually a layout system. Then, late in the last cycle, subgrid, which closes most of the holes Grid still had.

The thing that has changed is not that the tools are new. They are not new any more. What has changed is that I now reach for them in a different order. Three or four years ago I would default to Flexbox and only switch to Grid when the design clearly demanded it. Today the default is the other way round. Most layouts I build start as a single Grid declaration on the page wrapper. Flexbox shows up inside a card, or a navigation row, where its one-dimensional nature is the right tool.

A few patterns that are worth getting in your hands if they are not already:

grid-template-columns: subgrid for child elements that need to align to the parent’s columns. Particularly useful for cards in a row that need consistent internal alignment without each card knowing the whole grid.

minmax() and auto-fit for responsive grids that do not need media queries. The pattern grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)) is more durable than three breakpoints’ worth of Flexbox calls.

grid-template-areas for actual page-level layouts where the named regions are the whole point. This is the closest CSS gets to writing the layout in plain English.

Rachel Andrew has been the most useful single source on Grid for the last decade. Her layout cookbook on MDN covers most patterns you will need without straying into novelty. Una Kravets writes about whatever has just landed in the spec, which is usually three months ahead of where I am thinking.

The other thing worth saying: subgrid is now in every major browser and has been for a year. If you are still avoiding it because of an old support note, the note is out of date. Caniuse will tell you the same.

Most of my client builds in 2024 have used Grid for the page, subgrid for the typographic rows inside long-form pages, Flexbox for components, and almost nothing else. It has been the calmest year of CSS layout I can remember.