使用 box-sizing: border-box 可使 width 包含 padding 和 border，避免栅格项因内边距撑破容器；需全局设置 , ::before , *::after { box-sizing: border-box } 以确保伪元素尺寸一致。
直接用 box-sizing: border-box 就能避免栅格项因 padding 和 border 撑破容器——否则 width: 33.33% 的三列，加了 padding: 16px 后实际宽度会超 100%，强制换行。
为什么栅格项加 padding 就错位？
默认 box-sizing: content-box 下，width 只管内容区：width: 33.33% + 左右 padding: 16px = 实际宽度 ≈ 33.33% + 32px。小屏下父容器窄，这点“隐形膨胀”就让三列变两列，甚至触发横向滚动条。
常见错误现象包括：
-
.col-4 { width: 33.33%; padding: 16px; }在移动端只显示一列或两列 - 用
calc(33.33% - 32px)补偿，但断点一改就要同步调数值，维护成本高 - 第三方 UI 组件嵌入后内部间距异常，疑似“样式污染”实则是盒模型不一致
必须全局设置 * { box-sizing: border-box } 吗？
是的，而且要写全：*, *::before, *::after { box-sizing: border-box; }。只写 * 会漏掉伪元素，而很多栅格工具（比如 Bootstrap 的 ::before 清浮动）或图标库依赖伪元素渲染装饰，它们若仍走 content-box，就会悄悄破坏整体尺寸一致性。
这样做的实际效果是：
-
width: 33.33%真正代表该列最终占据的宽度，padding和border全部从这 33.33% 里扣减 - 媒体查询中只需改
padding值，不用碰width或calc() - Flex/Grid 容器里的子项对齐更稳，
flex: 1或1fr不会因内边距意外溢出
padding 放在栅格项上还是容器上？
优先放在栅格项（如 .grid-item）上，而不是容器（如 .grid）上。容器加 padding 会压缩子项可用宽度，导致子项的百分比计算基准变小，反而更难控制。
安全做法：
- 栅格项设
padding，配合box-sizing: border-box - 移动端用媒体查询减小
padding值，例如@media (max-width: 768px) { .grid-item { padding: 8px; } } - 需要列间空隙时，优先用
gap（Flex/Grid 原生支持），它和box-sizing互不干扰：间隙归gap管，自身尺寸归border-box管
真正容易被忽略的是伪元素——*::before, *::after 必须显式包含，否则某些组件内部用伪元素模拟边框或装饰时，尺寸逻辑会突然“掉链子”，而且很难定位到根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
