Bootstrap 5 的 CSS Grid 系统是独立于传统 .row/.col 的并行能力，不兼容也不替代；必须使用 .grid + .g-col-（≥5.3.0），禁用混用 .col-，适用于需二维布局的场景。
Bootstrap 5 的 CSS Grid 系统不是旧版栅格的“升级版”，而是并行存在的独立能力——它不替换 .row/.col，也不兼容它们；选错路径会直接导致列宽塌缩、间隙消失、断点失效。
为什么不能给 .row 加 display: grid
这是最常踩的坑：手动在已有 .row 上加 display: grid，看似“启用了 Grid”，实则破坏底层契约。
-
.row的负外边距（如margin: 0 -0.75rem）在 Grid 容器中完全失效，子项内边距不再被抵消，列之间出现双倍间隙或重叠 -
.col-6依赖的flex: 0 0 50%在 Grid 下被忽略，列宽退化为内容宽度，12 分栏逻辑彻底崩坏 - 所有响应式类（如
.col-md-4）背后是 Flex 属性 + 媒体查询组合，Grid 容器里这些规则不触发对齐或换行
.grid + .g-col-* 是唯一正经用法
Bootstrap 5.3+ 提供了真正可落地的 Grid 工具类，它和传统栅格互不干扰，但必须全量切换。
- 启用前提：确保版本 ≥
5.3.0，且 CSS 文件包含_grid.scss编译结果（CDN 默认已含） -
.grid类等价于display: grid; gap: var(--bs-gap)，无需额外写.g-3 -
.g-col-4表示占总列数的 4/12（默认仍沿用 12 列），支持.g-col-md-3这类断点变体 - 不支持
.g-col-auto或.g-col-xxl-*，仅限sm–xxl和整数份额（1–12）
示例（三栏等宽响应式）：
立即学习“前端免费学习笔记（深入）”；
<div class="grid"> <div class="g-col-4">左侧</div> <div class="g-col-4">主区</div> <div class="g-col-4">右侧</div> </div>
什么时候该切到 .grid，而不是硬改 .row
核心判断标准：是否需要二维控制力——Flexbox 天然只能管“一行内怎么排”，Grid 才能管“跨行跨列怎么摆”。
- 仪表盘布局：统计卡片需
grid-row: span 2，侧边栏固定在右上角（grid-column: 4 / -1） - 复杂对齐：多张卡片需严格等高 + 垂直居中 + 不同跨度，Grid 的隐式轨道比 Flex 的
align-items更可控 - 响应式重排：用
grid-template-areas在不同断点下整体调换区域顺序，比一堆.col-md-6+.order-md-2更清晰 - 老项目重度依赖
.col-lg-8？别切。DOM 结构、样式链、JS 插件都耦合在 Flex 逻辑里，强行迁移成本远高于收益
容易被忽略的细节
真正卡住人的往往不是语法，而是隐性约束：
-
.grid容器里不能混用.col-*—— 类名会加载，但宽度计算完全失效，调试时很难定位是类没生效还是逻辑崩了 - 如果项目要兼容 IE11，
.grid必须配 Flex fallback，而 Bootstrap 原生 Flex 栅格支持更好，这时选.row反而是更稳的选择 -
--bs-columns默认是 12，但你可以用 CSS 变量覆盖：.my-grid { --bs-columns: 24; }，然后.g-col-6就变成占 1/4，这个能力在传统栅格里根本不存在
