Grid container: Use <body> vs. wrapper inside <body>

In CSS Grid, what are the cons, if any, of using the <body> element as the grid container?

If I use a wrapper inside the <body> as a grid container, is there a semantic element to use instead of <div>?

I’m trying to figure out best practices for what element to define as the grid container.

Hi,

This is not a definitive answer but just a few thoughts.

tl;dr
if you can, avoid wrappers, and use the semantic elements (when they have semantic meaning). If there is no semantic meaning, use just a wrapper.


Some ideas
The problem comes if we look the problem in a slightly different way. Let’s say we include wrappers everytime we need grids, or flexbox, instead of using semantic elements. Then, when somebody reads the code, it would be cluttered of those elements.

So as a first thing, we don’t want a cluttered HTML.

But it’s not a bad practice to include one or two wrappers here and there.

What is wrong would be to include semantic elements only as wrappers, because that’d make accesibility a terrible thing, and most of semantic elements will through errors in validation, which is an extra problem. For example, sections and articles need headers etc.

Last but not least, if you use whatever CSS layout properties for your HTML, that has nothing to do with accesibility. Most troubles come if you play with colors, visibility and display, I believe.

The body of the document wraps all but the page, why wouldn’t that be a grid?
There is no necessity to include anything else here. But sometimes there are no alternatives.

So, as a conclusion I’d say this: if you can, avoid wrappers, and use the semantic elements (when they have semantic meaning.) If there is no semantic meaning, use just a wrapper.

2 Likes

None at all, if you want the children of the <body> to be laid out in a two-dimensional way, which is a pretty normal thing to want.

Grid doesn’t have anything to do with semantics: it’s just a way to state what layout algorithm the direct child elements of another element should use, same as flex. The child elements in this case may be, say a, <header>, a <main> and a <footer> – there’s the semantic structure, but whether <body> uses layout: grid is of no consequence in that regard.

1 Like