直接套用 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 在第三层嵌套里就变成不可预测的宽度了。
