grid容器未撑满屏幕主因是html/body默认8px外边距，需设margin:0;padding:0；容器应为块级且无max-width等约束，width:100%常冗余；100vw有滚动条和缩放问题；自适应关键在grid-template-columns响应式定义，如auto-fit+minmax；变窄多因父元素布局或box-sizing未设。
grid 容器设 width: 100% 为什么没撑满屏幕？
直接写 width: 100% 通常无效，因为父容器可能没设宽、或有默认 margin / padding，更常见的是 body 和 html 默认有 8px 外边距。网格容器本身不决定“占满”，它只按父级可用空间布局。
- 先确认根级：给
html和body清掉默认边距：html, body { margin: 0; padding: 0; } - 确保容器是块级且无其他约束：避免父元素设了
max-width、inline显示、或被float影响 -
width: 100%在 flex/grid 容器上常冗余——只要父级宽度正确，display: grid的块级容器默认就占满
用 100vw 强制占满视口宽度是否可靠？
100vw 是视口宽度单位，看起来直接，但容易踩两个坑：滚动条和缩放。
- 在有垂直滚动条的页面，
100vw包含滚动条宽度（如 17px），导致内容溢出或横向滚动 - 部分浏览器缩放时，
vw计算可能失准，尤其嵌套 grid 中 - 更稳妥做法仍是清空
html/body边距 + 确保容器为块级 + 不额外加width属性
响应式网格容器怎么真正自适应？
“自适应”关键不在容器宽，而在 grid-template-columns 如何响应尺寸变化。容器本身只需自然流式宽度，列定义才决定断点行为。
- 用
minmax()+auto-fit实现流动列：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)));\n
- 避免固定像素列（如
200px 200px），否则小屏会溢出 - 搭配媒体查询微调列数，比硬设容器宽更可控：
@media (max-width: 768px) {\n .grid { grid-template-columns: 1fr; }\n}
为什么加了 display: grid 后容器反而变窄了？
这不是 grid 的错，而是 CSS 块级元素默认行为被干扰。常见诱因：
立即学习“前端免费学习笔记（深入）”；
- 父元素用了
display: inline-block或display: flex且未设width: 100% - 容器有
border或padding，但没开box-sizing: border-box，导致总宽超 100% - 写了
grid-template-columns: 100% 100%这类错误写法——grid-template-columns的值是列宽，不是容器宽，不能填百分比（除非配合grid-auto-flow: column等特殊场景）
最简验证方式：临时加 outline: 1px solid red 到容器，看是否贴边；再检查 computed styles 里 width 和 actual width 是否一致。
