必须用 minmax(0, 1fr) 替代 1fr 保证窄屏收缩性，grid-column: span N 控制列跨度，gap 管理间距，媒体查询需显式重置 grid-column 和 gap 值，避免混用 margin。
直接用 repeat(12, minmax(0, 1fr)) + grid-column: span N 就能跑起来，但漏掉 gap、minmax() 或媒体查询中的断点同步，布局大概率在小屏错位、撑破容器或留白失控。
为什么不能只写 repeat(12, 1fr)
纯 1fr 在窄屏下非常脆弱：一段长文本或一张未约束的图片会强行拉宽某列，导致整行溢出、触发横向滚动条。Bootstrap 的 col-4 能稳定占约 33.33%，靠的不是“12等分”这个动作，而是列轨道具备收缩能力。
-
minmax(0, 1fr)允许列压缩到 0，内容再大也不撑破容器 - 不设
minmax时，浏览器会优先保内容，而非保栅格结构 - IE11 不支持
minmax()，如需兼容，得用@supports降级为float布局
grid-column: span N 是核心控制方式
Bootstrap 的 col-6 本质是“从当前起始线跨 6 列”，不是设置 width: 50%。Grid 原生用 span 表达这个语义，最直觉、最不易被其他样式干扰。
- 别给子项设
width、margin或float——它们会覆盖 grid 的位置计算逻辑 - 偏移（类似
offset-2）应写grid-column-start: 3，而不是靠margin-left模拟 - 嵌套容器内，子项默认仍从第 1 条线开始，所以
.col-4在嵌套.row中依然占前 4 列，无需额外重置
响应式断点必须手动绑定 grid-column
CSS Grid 不会自动把 col-md-6 映射成“中屏下占 6 列”，它只认你写的 CSS 规则。断点类名只是开发者约定，生效靠的是媒体查询显式重置 grid-column 值。
立即学习“前端免费学习笔记（深入）”；
- 基础类统一设
.col-4 { grid-column: span 4; }，覆盖所有断点 - 断点覆盖示例：
@media (min-width: 768px) { .col-md-6 { grid-column: span 6; } } -
gap也要响应式调整：小屏常设gap: 0或gap: 8px，大屏可放大到gap: 24px - 避免同时加
.col-4和.col-md-6：后者会覆盖前者，但维护时容易误删或冲突
留白必须用 gap，别碰 margin
gap 是 Grid 原生间距机制，作用于轨道之间；而 margin 是项目自身外边距，会干扰 grid-column: span 的起始位置判断，尤其在嵌套或偏移场景下极易错位。
- 容器上设
gap: 16px，子项不用任何padding或margin控制间距 - 如果设计要求“首尾无间隙”，用
padding模拟更安全，比如.row { padding: 0 16px; gap: 16px; } - 混用
gap和margin是调试中最难排查的错位原因——表现常为“看起来对齐，但一缩放就偏移”
真正卡住人的地方，往往不是“怎么写”，而是“改哪一行会让所有断点同时失效”：比如动了容器的 grid-template-columns 却忘了同步更新各断点下的 grid-column 值，或者调了 gap 却没重测嵌套层级的对齐。这类问题不会报错，只会在某个特定视口宽度下静默崩塌。
