用repeat(12, 1fr)定义12等宽列仅完成基础划分，需配合gap控制间距、grid-column: span N实现跨列、媒体查询重设grid-template-columns以适配响应式断点，并避免内容撑破应改用minmax(0, 1fr)。
用 grid-template-columns 模拟12列等宽栅格
核心是把容器设为 display: grid，再用 repeat(12, 1fr) 定义12个等分轨道。这比 Bootstrap 的 float 或 flex 模拟更直接，也无需额外 wrapper 元素。
常见错误是漏掉 grid-column-gap（或 gap），导致列之间没间距，视觉上“粘连”——Bootstrap 默认有 15px 间隙，CSS Grid 需显式声明：
-
grid-column-gap: 15px（旧语法，兼容 IE 以外主流浏览器） -
gap: 0 15px（推荐，同时控制行/列间隙，IE 不支持）
注意：1fr 是比例单位，不是像素；12个 1fr 等价于均分容器宽度，不依赖内容或固定值。
用 grid-column 实现类似 col-4 的跨列逻辑
Bootstrap 的 col-4 表示占 4/12 = 1/3 宽度。在 Grid 中，等价写法是 grid-column: span 4，表示跨越 4 个轨道。
立即学习“前端免费学习笔记（深入）”；
实际使用时要注意起始位置默认从第 1 栏开始，所以 grid-column: span 4 等同于 grid-column: 1 / 5。如果需要偏移（如 offset-2），得手动指定起始线：grid-column: 3 / span 4（从第 3 线开始，跨 4 栏）。
- 不要写
grid-column: 4——这是语法错误，grid-column必须是start / end或span N - 响应式需配合媒体查询重置
grid-column，例如小屏下改为span 12 -
grid-column作用于子元素，父容器必须是display: grid
响应式断点要重定义 grid-template-columns，而非只调 span
Bootstrap 在 sm、md 等断点会改变列数行为（如 col-md-6 表示中屏起占半宽）。Grid 中不能只靠改 span 实现，因为基础轨道数没变——12栏在手机上挤成一排反而难读。
正确做法是在媒体查询里重建轨道结构：
@media (max-width: 768px) {
.container {
grid-template-columns: repeat(4, 1fr); /* 小屏改4栏，再用 span 3 表示 3/4 宽 */
}
}
@media (min-width: 769px) {
.container {
grid-template-columns: repeat(12, 1fr);
}
}否则会出现：明明写了 grid-column: span 6，但 12 栏在窄屏下被压缩到无法阅读，且间隙比例失真。
避免用 grid-area 或命名线过度设计“类 Bootstrap API”
有人试图用 grid-template-areas 或 grid-line 命名（如 col-start-3）来模仿 Bootstrap 类名，结果代码膨胀、维护困难。Grid 的优势在于简洁声明布局关系，不是复刻 class 命名体系。
真正需要的只是三类控制：
- 容器：定义
grid-template-columns+gap - 项目：用
grid-column（和可选的grid-row）定位 - 响应式：在断点里调整前两者，不新增抽象层
命名线（如 grid-column: start / end）适合复杂布局，但 12 栅格这种线性场景，数字索引（span 4）更直白、调试更方便——Chrome DevTools 里 hover 网格线会直接标出数字编号。
