Are nested grids like nested tables?

A thing I keep hearing, and especially when talking about subgrid is, “nested grids … isn’t that like tables within tables in the olden days?”

It is not. This is why.

When you want to use grid layout, what you are doing is changing the display property on a containing element, asking it to lay out its children as grid items. That’s what display: grid means. It means “make me a block level container with grid item children”. Those child elements then behave in the way brought to us by grid layout.

The same is true if you say display: flex, except those child elements behave like flex items.

In both cases, the children of those flex and grid items go right back to normal flow. The block and inline layout that elements use by default on the web. This is the reason why if you write some HTML it doesn’t all mush together in one long unreadable line.

If you don’t want the children to go to normal flow, then you can change their display value. Make your grid item become a grid container itself. The idea behind the subgrid feature of grid layout is that it will be possible to opt those grid items which have become a grid container into the track sizing defined on their parent grid - if you want to - rather than defining grid-template-columns or grid-template-rows for that new set of grid items to sit on.

Semantic markup creates these nested structures, we then decide which layout method we want to use to lay out the content we create. So while nesting grids is a quick way to explain a structure, it’s not something special we are doing. We’re just using CSS to change the value of display, one level at a time.

If you want to compare that to HTML tables as used for layout, and I lived through that era, we were doing something very different. There we would create a table structure, often tables within tables, and then poke our content into the gaps we had created. We weren’t taking semantic HTML and changing the display method used on it, we were creating a layout structure in HTML then shoving our design into the gaps, shattering it into bits as we did so. We removed all sensible order and structure, rendering it inaccessible to screen readers or anything trying to parse that information.

So do not worry, talk of nesting grids has nothing to do with nested tables.

If you want to understand more about display I have kicked off a little series over at Smashing Magazine with Digging Into The Display Property: The Two Values of Display. To learn about subgrid, I have an article about subgrid too, and most of my talks this year cover subgrid in some way.

The CSS Layout Online Workshop

If you are ever baffled by floats, puzzled by collapsing margins or want to understand what is happening under the hood of a framework, this course is for you.

Posted a response? Enter the URL

This site uses Webmention. If you post a response to this post on your own site, and you also support Webmention I'll be notified automatically. If not you can add a link here.