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