直接套用 repeat(12, 1fr) 不等于 Bootstrap 的 12 列语义，因其仅实现等宽轨道划分，缺失 gutter 间隙、响应式断点类（如 col-md-4）及容器约束（如 .row 的负 margin 抵消逻辑），无法通过 class 控制跨列占位与布局行为。
为什么直接用 repeat(12, 1fr) 不等于 Bootstrap 的 12 列语义
它确实能划分出 12 个等宽轨道，但 Bootstrap 的列系统核心不是“均分”，而是「按需占位 + 响应式断点 + 边距隔离」。纯 repeat(12, 1fr) 缺少三样东西：列之间的 gutter（间隙）、响应式类（如 col-md-4 对应的断点逻辑）、以及对内容容器（.container）和行容器（.row）的布局约束。直接套用会导致子元素无法通过 class 控制跨列数，也没有自动的负 margin 抵消 gutter。
如何用 Grid 实现可 class 控制的 12 列行为
关键不是只定义 grid-template-columns，而是配合 grid-column 和自定义属性实现类似 col-6 的声明式占位：
- 在行容器（如
.row）上设display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; - 为列元素写类，例如
.col-4 { grid-column: span 4; }，.col-8 { grid-column: span 8; } - 响应式只需叠加媒体查询：
@media (min-width: 768px) { .col-md-6 { grid-column: span 6; } } - 注意：gutter 会撑开总宽度，若要严格保持 100% 宽度，需确保父容器有
box-sizing: border-box，且不额外加 padding/margin 干扰 grid 轨道计算
grid-column: span N 和 grid-column-start / end 的选择差异
用 span 更接近 Bootstrap 的直觉（“占 N 列”），但隐含依赖起始位置 —— 浏览器默认从第 1 根线开始，所以 .col-4 总是占 1–4；而显式写 grid-column-start: 3; grid-column-end: 7; 能精确定位，适合复杂嵌套或错位布局。但日常栅格中，span 更简洁、更少出错。
常见陷阱：
立即学习“前端免费学习笔记（深入）”；
- 没重置
grid-column导致后续元素继承前一个的跨度（尤其用 JS 动态插入时） - 在设置了
grid-auto-flow: column的容器里，span行为会变成横向铺满，而非纵向占行 - IE11 不支持
span语法，必须用start/end写法（如果还要兼容）
要不要用 fr 单位？替代方案有哪些
1fr 是最常用选择，但它本质是“剩余空间等分”，当某列内容超宽（比如长单词或图片），可能挤压其他列。如果需要更稳定的列宽控制：
- 用固定值：
grid-template-columns: repeat(12, minmax(0, 1fr)))—— 强制允许收缩到 0，避免溢出 - 混合单位：
repeat(12, minmax(150px, 1fr)))，兼顾最小可用宽度与弹性 - 完全放弃
fr，改用百分比：repeat(12, calc(8.333333%))，但失去 flex-like 自适应能力，且需手动处理 gutter 占比
真正容易被忽略的是：gutter 的单位必须和列单位解耦。别用 gap: 1fr —— 这是无效的，gap 只接受长度值或 normal。
