div设置width:100%无法撑满grid容器宽度的原因及解决方法

• 全局样式重置遗漏padding: 0规则：<menu>属于原生列表类元素，浏览器用户代理样式默认会为其添加padding-inline-start: 40px（从左开始的40px内边距）。现有重置代码仅清空了margin和border，未清除默认内边距，导致侧边栏容器的实际内容区宽度被内边距压缩，内部子元素即使设置width: 100%，也只能撑满被压缩后的内容区，无法填满整个容器的可视宽度。
• Grid容器未显式定义列规则：.dash-desk-sidebar作为Grid容器仅设置了grid-template-rows定义行布局规则，未显式声明grid-template-columns，隐式列默认的auto尺寸规则在容器存在默认内边距的场景下，会进一步导致子项宽度适配异常。

1. 补全全局重置规则，清除所有浏览器默认内边距：

*,
html {
  margin: 0;
  padding: 0; /* 新增该行清除默认内边距 */
  border: 0;
  box-sizing: border-box;
  color: #fff;
  font-family: pc_seniorregular;
  font-weight: 400;
}

2. 为侧边栏Grid容器显式设置单列规则，强制子项横向撑满容器：

.dash-desk-sidebar {
  display: grid;
  grid-template-columns: 1fr; /* 新增该行，定义单列占满容器全部宽度 */
  grid-template-rows: 0.7fr 7fr 1fr;
  height: 100%;
  width: 100%;
  border: 5px dotted blue;
}

• 不建议全局给div、menu、header、footer统一强制设置display: grid、height: 100%、width: 100%，这类暴力全局设置容易导致不需要网格布局的元素出现排版异常，且Grid布局默认的stretch对齐规则会自动让子项撑满对应网格轨道，无需额外为子项手动设置width: 100%，重复设置反而容易在添加内边距、边框时引发布局溢出。
• 完成上述修改后，侧边栏内的logo、菜单列表、社交区三个div会自动撑满侧边栏容器的完整宽度。

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