响应式栅格系统由container-row-col三层结构、百分比宽度、媒体查询协同实现；列宽用百分比（如25%）确保相对缩放，配合box-sizing:border-box防溢出，flex布局比浮动更可靠，断点应遵循移动优先原则用min-width定义。
响应式栅格系统不是靠某个“魔法属性”实现的，而是由 container、row、col 三层结构 + 百分比宽度 + 媒体查询 共同协作完成的。核心在于：列宽用百分比算，断点用 @media 控制，容器用 max-width 限宽，行用 display: flex 或负边距兜底。
为什么必须用百分比而不是固定像素？
固定像素（如 width: 300px）在小屏上会直接溢出或强制横向滚动；百分比（如 width: 25%）让列宽始终相对于父容器计算，天然适配缩放。但要注意：padding 和 border 默认不计入百分比宽度，所以必须加 box-sizing: border-box，否则实际宽度会超 100%。
- 错误写法：
.col { width: 33.33%; padding: 15px; }→ 实际占宽 > 33.33% - 正确写法：
.col { width: 33.33%; padding: 15px; box-sizing: border-box; } - 更稳妥的替代：
width: calc(100% / 3)，避免手算 33.333... 的精度误差
Flexbox 的 row 为什么比浮动更可靠？
浮动方案依赖 ::after 清除和 float: left，一旦漏写 clearfix，row 高度塌陷，后续元素错位；而 display: flex 天然撑开父容器，且支持 flex-wrap: wrap 自动换行，无需额外处理。
-
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }—— 负外边距抵消列的左右padding -
.col { flex: 0 0 25%; padding: 0 15px; }——flex: 0 0表示不伸缩不收缩，只按设定宽度排布 - IE10+ 支持良好；若需兼容 IE9 及以下，才退回浮动方案
@media 断点怎么设才不踩坑？
断点不是凭感觉写的，得对应真实设备常见视口宽度，且要遵循“移动优先”原则：基础样式默认为小屏，再用 min-width 逐级增强。别用 max-width 堆叠，容易覆盖冲突。
立即学习“前端免费学习笔记（深入）”；
- 推荐断点：
@media (min-width: 768px)（平板竖屏起）、@media (min-width: 992px)（小桌面）、@media (min-width: 1200px)（大桌面） - 避免写成：
@media (max-width: 767px) { .col-md-6 { width: 100%; } }—— 这类写法在 767.5px 时行为不可控 - 所有断点里的列类名（如
.col-md-6）必须和基础列类共存，不能只在媒体查询里定义新类
真正难的不是写出一套能跑的栅格，而是让 col 在嵌套场景下仍保持语义清晰、宽度准确、间距一致——这要求每一层 row 都严格包裹 col，且禁止在 col 内部再用 row 时不重置负外边距。稍一松懈，嵌套两层后列宽就全乱了。
