百分比宽度网格易错位因盒模型默认content-box使padding/border超出100%；应统一box-sizing:border-box、用calc()或flex/grid替代纯百分比，并按内容而非设备设媒体查询断点。
百分比宽度网格为什么容易错位
用 % 写列宽时，只要加了 padding、border 或 margin，实际占用宽度就会超出 100%，导致换行或溢出。浏览器按盒模型默认是 content-box，所以 width: 33.33% + padding: 10px 的元素，总宽远超三分之一。
- 统一加
box-sizing: border-box，让padding和border包含在宽度内 - 避免对网格容器设
padding后再用子项width: 100%—— 改用calc(100% - 20px)或留白靠父容器padding控制 - 列宽总和别硬写
33.33% + 33.33% + 33.33% = 99.99%，小数误差累积会导致最后一列掉行；用33.333%或更干脆用flex/grid替代纯百分比
媒体查询断点怎么选才不漏设备
只写 @media (max-width: 768px) 是常见陷阱：它会把 iPad 竖屏（768px）、部分安卓平板横屏（比如 800px）和小屏笔记本（1024px 但缩放 125%）全混在一起，样式错乱。
- 优先按内容断，不是按设备断：比如“当侧边栏撑不开时收起”“当卡片并排显示不下三列时降为两列”
- 用
min-width而非max-width更易维护，例如从移动优先出发，基础样式写单列，再用@media (min-width: 640px)加两列，@media (min-width: 1024px)加三列 - 测试时打开浏览器开发者工具的「设备模拟」，但更要真机连 Chrome DevTools 远程调试，iOS Safari 的视口行为和缩放逻辑常有差异
纯 CSS 百分比网格的最小可行结构
不用框架、不依赖 JS，仅靠 CSS 实现三栏→两栏→单栏响应式，关键在容器清除浮动 + 子项百分比计算 + 边距统一处理。
/* 基础网格容器 */
.grid {
width: 100%;
overflow: hidden; /* 清除浮动 */
}
.grid::after {
content: "";
display: table;
clear: both;
}
<p>/<em> 子项通用重置 </em>/
.grid > * {
box-sizing: border-box;
float: left;
padding: 10px;
}</p><p>/<em> 移动端：100% 单列 </em>/
.grid > * {
width: 100%;
}</p><p>/<em> 平板：两列，留 20px 间隙（左右 padding 各 10px）</em>/
@media (min-width: 640px) {
.grid > <em> {
width: calc(50% - 10px); /</em> 减去右 margin 或靠 padding 挤出间隙 <em>/
}
.grid > </em>:nth-child(2n) {
margin-left: 10px;
}
}</p><p>/<em> 桌面：三列 </em>/
@media (min-width: 1024px) {
.grid > <em> {
width: calc(33.333% - 13.333px);
}
.grid > </em>:nth-child(2),
.grid > *:nth-child(3) {
margin-left: 10px;
}
}什么时候该放弃百分比，改用 CSS Grid 或 Flexbox
当你开始写 calc() 套嵌、反复调边距、为兼容 IE8 加 hack，或者需要跨行/跨列/对齐控制时，说明百分比网格已到能力边界。
立即学习“前端免费学习笔记（深入）”；
-
display: grid天然支持响应式列定义，比如grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，一行代码搞定流式等宽网格 -
display: flex配合flex-wrap和flex-basis更易控制换行与伸缩，且 IE10+ 支持良好 - 百分比方案真正适用的场景只剩：必须兼容 IE8–9，或嵌入老旧 CMS 模板无法改 HTML 结构，只能靠纯 CSS 微调
现在多数项目里，用百分比写响应式网格，不是为了适配，而是卡在 legacy code 里被动维持——这点容易被忽略。
