用 repeat(12, minmax(0, 1fr)) 定义列轨道，配合 grid-column: span N 控制跨列，即可原生实现响应式12栅格；响应式用 @media 切换 span 值，留白用 gap，避免 margin 干扰；span 适合流式布局，2/6 适合精确对齐；IE11 用 @supports 降级为 float 布局。
用 CSS Grid 实现 12 栅格，别写 12 个 grid-column 类
直接上结论：用 repeat(12, 1fr) 定义列轨道，再配合 grid-column: span N 控制跨列，就能复刻 Bootstrap 的栅格行为，无需 JS 或预处理器。
关键不是“仿得像不像”，而是“改起来是否顺手”。Bootstrap 的 col-6、col-md-4 本质是控制 grid-column 起止线，CSS Grid 原生支持这个逻辑，只是默认没暴露语义类名。
实操建议：
- 容器加
display: grid和grid-template-columns: repeat(12, minmax(0, 1fr))——minmax(0, 1fr)防止内容撑破列宽，比纯1fr更健壮 - 子项用
grid-column: span 4表示占 4 列，等价于 Bootstrap 的col-4 - 响应式断点直接套
@media，在不同屏幕下改grid-column值，例如@media (min-width: 768px) { .col-md-6 { grid-column: span 6; } } - 留白用
gap统一控制，别用margin—— 否则会干扰span计算
为什么不用 grid-template-areas 写栅格
grid-template-areas 适合固定布局（比如页头/侧边栏/主内容区），但 12 栅格是动态组合的：同一行可能有 span 3 + span 9，也可能有三个 span 4。硬写 grid-template-areas 会导致类名爆炸，维护成本远高于 span。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 写死
"a b c" "d e f"后，加一个新列就得重写所有区域名 - 响应式切换时，
grid-template-areas在不同断点间难以对齐起止线 - 内容为空的网格项仍占位，而
span天然跳过空项
span 和 / 语法的区别：什么时候该用 grid-column: 2 / 6
grid-column: span 4 是相对定位，从当前自动分配的起始线往后跨 4 条线；grid-column: 2 / 6 是绝对定位，强制从第 2 线开始、到第 6 线结束（即跨 4 列，但起点固定）。
使用场景：
- 需要精确对齐多行组件（比如表单标签和输入框要垂直对齐），用
2 / 6更可控 - 常规流式布局（卡片、文章列表）用
span N更灵活，不依赖父容器已渲染的顺序 - 注意：如果父容器用了
grid-auto-flow: column，span会横跨列而非行，容易误判——默认保持row
兼容性与 fallback：IE11 不支持 Grid 怎么办
如果必须兼容 IE11，不要试图用 @supports 降级到 Flexbox 栅格——两者行为差异大（Flex 的 flex-basis 在百分比计算上易出错，且无法实现真正的“行内换行对齐”）。
更务实的做法：
- 用
@supports (display: grid)包裹 Grid 栅格规则，IE11 自动跳过，走回退的 float 或 inline-block 布局（仅用于基础展示） - 避免在 Grid 规则里混用
float，否则现代浏览器也会因层叠顺序异常 - 真要支持 IE11 且需完整栅格语义，建议用 PostCSS 插件（如
postcss-grid-kiss）编译出双轨 CSS，而非手写两套
真正容易被忽略的是 gutters：Grid 的 gap 在 Safari 14.1 之前不支持百分比值，若设计稿 gutter 是 1.5%，得降级为固定像素或用 padding 模拟。
