CSS网格嵌套在wrapper-div或body元素中？

Question

在本系列中，他们都使用了包装器div。

MDN - CSS GRID Layout

这是否必要，如果是，为什么？

Answer 1

包装的目的是多种，包括：

• 以语义方式对元素进行分组，例如以分隔页面标题来自页脚的侧边栏中的正文文本。
• 以装饰性方式对元素进行分组，例如带有边框或常见的背景图片或颜色。
• 将布局中的元素分组，例如使它们保持相同列彼此相邻时浮动列。
• 启用特殊定位，例如当包装被赋予相对位置时定位以便包含绝对的子元素定位。
• 为了更方便地在CSS和JavaScript中指定元素通过参考他们的父母，而无需分别对他们进行id或分类子元素。

（（注意：上面的var应该全部在一行上）

因此，在这种情况下，我认为他们都使用了包装器div来对布局中的元素进行分组。