I realised last night while watching a presentation by Lea Verou that I could streamline my CSS Grid layouts.

I’d been creating an overall page grid by setting body { display: grid; } and some grid areas, but noticed that this only got me so far when it came to aligning more deeply nested elements of the page to that grid.

For example in the case of the main header, if I wanted its child logo, nav and search box elements to snap to the grid I found myself having to set display: grid and grid-template-areas again on the header.

It didn’t feel very DRY but my understanding was that while we await subgrid, this was a necessary evil.

What I should have been using is display: contents.

If you set this on your header then the body’s grid layout will apply to the header’s contents (logo, nav, etc) rather than the header itself. No need to redefine the grid on the header.

Here’s a codepen to illustrate.

I was aware of the existence of display: contents but somehow it hadn’t sunk in because I’d only read about it in the abstract.

Lea Verou’s explanation made all the difference. Cheers, Lea!