Grid布局中盒模型影响布局的关键在于box-sizing默认为content-box，需全局设为border-box；fr单位安全，px/rem需配合width:100%和border-box；gap与margin不合并，padding/border消耗轨道内空间。
Grid容器的width/height默认不含padding和border
你写的 width: 300px 在 Grid 容器上，实际只管内容区——padding 和 border 会额外往外撑。结果就是：明明设了100%宽度，加个 padding: 16px 就横向溢出、出现滚动条，或者最后一列被挤换行。
- 必须显式加
box-sizing: border-box，让 width/height 包含 padding + border - 这个设置建议全局生效：
* { box-sizing: border-box; }，避免漏掉某个容器 -
浏览器开发者工具里看「Computed」标签页下的
width和border-box size，比猜更准
grid-template-columns 中的单位决定谁“扛”盒模型开销
用 fr 是安全的——它分的是容器 content-box 的剩余空间，不care子项有没有 padding；但用 px、rem 就得小心：子项若没设 box-sizing: border-box，又写了 padding: 12px 和 border: 1px solid，那 100px 轨道里实际只剩 74px 给内容。
-
fr单位适合弹性分配，别拿它跟像素混算 - 固定轨道（如
200px）下，子项务必设width: 100%+box-sizing: border-box -
minmax(200px, 1fr)的200px是内容区最小值，不是总占地，padding/border 仍会超出去
子项的margin、padding、border在网格中各干各的事
很多人以为 gap: 12px 和子项 margin: 8px 会“抵消”或“合并”，其实不是：gap 是轨道间空隙，margin 是项目外边距，两者叠加，间隙变成 20px，还容易导致水平溢出。
-
margin会撑开相邻轨道间距（即实现 gutter），但不会塌陷，上下 margin 直接相加 -
padding和border消耗的是轨道内部空间，影响内容显示区域 - 想让子项填满轨道又带内边距？写
width: 100%; box-sizing: border-box;，别只靠width: calc(100% - 24px)
响应式下尺寸失控，往往是因为没统一box-sizing + clamp()
在 @media 里改 grid-template-columns，但忘了子项的 padding 在小屏下仍按大屏逻辑占空间，文字一多就撑破、换行错乱。
立即学习“前端免费学习笔记（深入）”；
-
响应式布局前，先确保所有相关元素都用了
box-sizing: border-box - 配合
clamp()控制轨道最小/最大宽度，比如minmax(clamp(280px, 100vw - 48px, 600px), 1fr) - 避免在子项上同时用
gap和margin，选一个统一控制间距
真正卡住人的从来不是 Grid 语法，而是盒模型那一层“看不见的厚度”——padding 和 border 不声不响吃掉几像素，就在你调好 layout 的下一秒让布局偏移、溢出、截断。盯紧 computed 值，而不是 CSS 声明值。
