不能直接用原生CSS Grid替代Bootstrap 5的Flexbox网格系统，因.row/.col依赖display: flex；可行方案只有升级至5.3+使用.grid/.g-col-*，或弃用.row/.col改用.d-grid+手写grid-template-columns。
不能直接用原生 CSS Grid “替代” Bootstrap 5 的 Flexbox 网格系统，因为 .row 和 .col 类从设计上就依赖 display: flex；强行覆盖会破坏负外边距、列宽计算和响应式逻辑。真正可行的路径只有两条：升级到 Bootstrap 5.3+ 后使用官方 .grid/.g-col-* 工具类，或彻底弃用 .row/.col，改用 .d-grid + 手写 grid-template-columns。
为什么给 .row 加 display: grid 会出问题
这是最常踩的坑，现象直观但原因容易被忽略：
-
.row的margin: 0 -0.75rem在 Grid 容器中完全失效，导致子项内边距未被抵消，列之间间隙翻倍甚至重叠 -
.col-6依赖的flex: 0 0 50%在 Grid 下被无视，列宽塌缩为内容宽度，12 分栏体系彻底崩坏 - 所有
.col-md-4这类响应式类，背后是媒体查询 + Flex 属性组合，在 Grid 容器里不触发宽度重算，断点“存在但无效” - Bootstrap 官方明确将此列为设计约束，而非 bug —— Flexbox 是栅格系统的底层契约
Bootstrap 5.3+ 的 .grid + .g-col-* 怎么用
这是唯一无需编译、开箱即用的官方 Grid 方案，但有严格前提：
- 必须使用
bootstrap@5.3.0+，CDN 或 npm 引入的 CSS 文件需含_grid.scss编译结果（默认已开启） -
.grid类等价于display: grid，并自动应用gap: var(--bs-gap)，无需额外加.gap-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 g-col-md-4">左侧</div> <div class="g-col-4 g-col-md-4">主区</div> <div class="g-col-4 g-col-md-4">右侧</div> </div>
用 .d-grid + 手写 grid-template-columns 更轻量可靠
适合不想升级版本、或需要精细控制行列定义的场景，但必须放弃所有 .row/.col 逻辑：
-
.d-grid只设display: grid，不带任何列数、断点或间距预设，必须手动写grid-template-columns - 响应式靠
d-sm-grid/d-md-grid切换类名，并配不同grid-template-columns，例如：style="grid-template-columns: repeat(2, 1fr);" - 别把
.col-4加在.d-grid子项上——它依赖 Flex 属性，在 Grid 容器里无意义；跨列用style="grid-column: span 2;" - 推荐用 Bootstrap 的
gap-3控制间距，比硬写gap: 1rem更一致，也避免与--bs-gap冲突
典型写法（五列等宽，中屏及以上生效）：
<div class="d-md-grid" style="grid-template-columns: repeat(5, 1fr); gap: 1rem;"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> </div>
混用 Flex 和 Grid 工具类极易失控
看似方便，实则埋雷：
- 在
.d-grid容器里塞.d-flex子项，或给 Grid 子项加justify-content-center，结果往往无效——Grid 容器下得用justify-items或place-items -
.col-6加在 Grid 容器子项上，宽度不会变成 50%，因为它的计算逻辑只在 Flex 子项中激活 - 想让某 item 跨两列？写
style="grid-column: span 2;"，别试图找col-span-2——Bootstrap 5 没这玩意 - 若需动态切换布局，用
d-flex d-grid d-xl-grid配合 JS 切类，而非在同一结构里硬塞两种逻辑
真正麻烦的不是语法，而是思维切换：Grid 是二维定位，Flex 是一维流式；一旦开始混用，列宽、断点、对齐全部变成不可预测状态。
