CSS网格布局中的12栏系统_使用Grid重构Bootstrap栅格

直接套用 grid-template-columns: repeat(12, 1fr) 会出问题，因为 fr 单位按剩余空间动态分配，无法自动处理 gutter、响应式断点、偏移及嵌套容器行为；需改用 minmax(0, 1fr) 防止小屏内容撑破，并配合媒体查询、gap 和 grid-column: span 显式控制布局。

为什么直接套用 grid-template-columns: repeat(12, 1fr) 会出问题

因为 CSS Grid 的 fr 单位是“剩余空间分配”，不是固定像素或百分比，它不自动处理 gutter（间距）、响应式断点、偏移（offset）和嵌套容器行为——而 Bootstrap 的 12 栏本质是一套带规则的布局协议，不是纯列数映射。

常见错误现象：col-6 在 Grid 下宽度忽大忽小；offset-2 没效果；在 sm 断点以下所有列堆成一列但内容溢出；嵌套 .row 内部子项错位。

• Bootstrap 的 gutter 是通过 padding-left/padding-right 加负外边距模拟的，Grid 需改用 gap + padding 组合实现
• fr 在不同容器宽度下比例会浮动，要固定栏宽需配合 minmax() 或固定值（如 minmax(0, 8.333%)）
• 响应式必须显式定义每个断点的 grid-template-columns，不能靠媒体查询外推

如何让 col-4 这类类名真正对应 4/12 宽度

关键不是列数，而是列轨道的“权重”与“可收缩性”。Bootstrap 的 col-4 表示占 4 份，但 Grid 要让它在各种容器宽度下都稳定占约 33.33%，就得避免 1fr 在小屏下被压缩到 0。

推荐写法：grid-template-columns: repeat(12, minmax(0, 1fr))) —— minmax(0, 1fr) 允许列收缩至 0，防止内容撑破容器，同时保持等分逻辑。

立即学习 “ 前端免费学习笔记（深入）”；

• 不要用 repeat(12, 1fr)：小屏下文字多时，列会强行撑开导致横向滚动
• 要支持 col-4，对应 grid-column: span 4，而非靠 class 控制 width
• 若需兼容 IE（已不推荐），minmax() 不生效，得退回到 float 或 flex fallback

怎么实现 col-sm-6 col-md-4 这样的断点切换

Grid 没有内置“断点类名”，必须用媒体查询重置 grid-template-columns 和子项的 grid-column。重点在于：断点值、列数、gutter 值三者要同步变。

例如 Bootstrap 的 sm 起始于 576px，md 是 768px，对应 Grid 写法：

/* 默认：移动端单列 */ .container {display: grid; grid-template-columns: 1fr; gap: 1rem;} <p>@media (min-width: 576px) {.container { grid-template-columns: repeat(6, minmax(0, 1fr))); } }</p><p>@media (min-width: 768px) {.container { grid-template-columns: repeat(12, minmax(0, 1fr))); } }

• 注意：断点内 grid-column: span 4 在 6 列模式下实际占 2/3 宽，在 12 列下才占 1/3 —— 这正是 col-sm-6 col-md-4 的语义
• 别漏掉 gap 的响应式调整，Bootstrap 的 gutter 在 sm 是 16px，md 是 24px，Grid 中需同步改 gap
• 子元素不需要加 @media，只靠父容器列数变化 + span 就能响应

嵌套 .row 和 col 时最容易漏掉什么

Grid 的嵌套不是“自动继承父容器列数”，而是完全独立的新网格上下文。如果你在某个 col-8 内再放一个 .row，它默认仍是 12 列，但父级只给了它约 66% 的宽度 —— 这会导致内部子项按 12 份算，但总宽只有 66%，视觉上严重缩窄。

正确做法：给嵌套容器显式设置 grid-template-columns，或统一用 subgrid（仅 Chrome/Firefox 支持，Safari 仍不支持）。

• 稳妥方案：嵌套容器不设 grid-template-columns，改用 display: contents 让子项融入父网格（但会丢失盒模型，慎用于有 padding/border 的场景）
• 更可控方案：嵌套容器设为 display: grid，并根据父级占比反推列数，比如父级是 span 6，就设 repeat(6, ……)
• 千万别假设“子 .row 会自动适配父宽度”，Grid 没这机制

复杂点在于：gutter、断点、嵌套层级、内容弹性之间没有默认协同关系，每层都得手动对齐规则。稍不注意，col-3 在第三层嵌套里就变成不可预测的宽度了。