CSS Grid nested in a wrapper-div or a body element?

Question

In this series they all used a wrapper div.

MDN - CSS GRID Layout

Is this necessary, and if yes, why?

Answer 1

The purposes of wrappers are several, including:

• to group elements semantically, for instance to separate page heading from body text from sidebar from footer.
• to group elements cosmetically, such as with a surrounding border or a common background image or color.
• to group elements in layout, such as to keep them all in the same column when columns are floated next to one another.
• to enable special positioning, as when a wrapper is given relative positioning in order to contain child elements with absolute positioning.
• to make it more convenient to specify elements in CSS and JavaScript by referring to their parent, without having to id or class each child element.

(Note: the var above should all be on one line)

So in this case, i think they all used a wrapper div just to group elements in layout.