box-sizing: border-box 可解决 grid-template-columns 因 padding 导致的错位问题，因其使 width 包含 padding 和 border，确保 25% 或 fr 单位严格按可见宽度分配，避免溢出、换行或列宽不均。
因为 box-sizing: border-box 让栅格项的 width 始终等于「可见宽度」，避免 padding/border 撑破列宽，省去反复减法计算。
grid-template-columns 遇到 padding 会错位？先锁死 box-sizing
常见错误现象：用 grid-template-columns: repeat(4, 25%) 布四列，但子项加了 padding: 10px 后整体溢出容器、换行或列宽不均——这是标准盒模型下 width: 25% 只算内容区，padding 和 border 额外叠加导致实际占用超 25%。
解决方法很简单：
- 全局重置：
* { box-sizing: border-box; }（推荐，一劳永逸） - 或仅对栅格容器和子项设置：
.grid-container, .grid-item { box-sizing: border-box; } - 确保所有栅格项的
width、max-width、flex-basis等尺寸属性都按「所见即所得」理解
fr 单位 + border-box 是响应式栅格的黄金组合
当使用 fr（fraction）单位做等分布局时，box-sizing: border-box 的价值更明显：
-
grid-template-columns: 1fr 1fr 1fr搭配padding: 16px，每列仍严格占 1/3 宽度，不会因内边距累积而挤压 - 若未设
border-box，padding 会让三列总宽 > 100%，触发滚动条或自动收缩 - border 也不再是“隐藏陷阱”：2px 边框直接吃进
1fr分配的空间里，无需手动写calc(33.333% - 4px)
gap 替代 margin 后，box-sizing 更关键
CSS Grid 的 gap 属性本意是替代传统用 margin 实现的间距，但它只作用于网格项之间，不包含容器内边距。这时候容易忽略两点：
- 如果还在子项上写
margin，会和gap叠加，造成意外空白；应统一用gap控制项间距离 - 但容器自身的
padding仍需存在（比如留白边），此时若子项不是border-box，padding 就会进一步放大子项实际尺寸，破坏栅格对齐 - 典型反例：
.grid-container { padding: 20px; }+ 子项width: 100%; box-sizing: content-box;→ 子项宽度 = 100% + 40px（左右 padding）
真正容易被忽略的点是：很多人开了 display: grid 就以为布局稳了，却没意识到盒模型仍是默认的 content-box。只要子项带 padding 或 border，栅格线就可能“看不见地偏移”。这不是 Grid 本身的问题，而是尺寸基准没对齐——box-sizing: border-box 就是那个让所有计算回归直觉的锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
