为何对body内id为container的div设置display:grid而非直接操作body？

使用#container容器设置display: grid而非直接在<body>上声明网格布局，常见的合理技术原因如下：

• 避免不可控元素打乱布局
  浏览器可能给<body>附加默认内外边距，同时很多第三方脚本（如统计代码、广告插件、浏览器扩展）会动态向<body>插入DOM元素，如果直接给<body>设网格布局，这些不在预期内的元素会被纳入网格计算，直接破坏原有排版逻辑。而容器内只有你自己可控的业务元素，不会受外部插入内容的影响。
• 布局扩展性更强
  如果你后续需要给页面内容添加统一的宽度限制（比如常见的1200px居中内容区，两侧留白）、全局边框、背景、内边距，直接在#container上修改即可。如果网格定义在<body>上，要实现这类需求反而需要额外套层，还可能触发高度、滚动的兼容问题。另外如果需要添加悬浮导航、全局弹窗这类脱离网格流的元素，直接写在#container外即可，不需要调整<body>的布局规则。
• 兼容性和复用性更好
  部分旧版本浏览器对<body>这类根级元素上的网格布局支持存在怪异行为，普通div的网格布局兼容性表现更一致。同时如果是多页面项目或者组件复用场景，#container的网格样式可以直接抽离复用，不需要每个页面都修改<body>的样式，也能避免不同页面的<body>样式互相冲突。
• 滚动行为更可控
  如果网格定义在<body>上，实现「头部、底部固定，内容区滚动」这类需求时，<body>的默认滚动逻辑和网格高度计算很容易出现冲突。套一层容器后可以单独控制容器的高度、滚动规则，不会影响<body>的默认滚动行为，调试成本更低。

内容的提问来源于stack exchange，提问作者matthew