不能直接用 CSS Grid 替换 Bootstrap 5 的 .row/.col 结构，因其绑定 display: flex；强行覆盖会导致列宽塌缩、间距翻倍、响应式断点失效及语义断裂。
不能直接用 CSS Grid 替换 Bootstrap 5 的 .row/.col 结构，因为它们从设计上就绑定 display: flex；强行覆盖会立刻导致列宽塌缩、间距翻倍、响应式断点失效。
为什么给 .row 加 d-grid 会崩
常见错误是写 <div class="row d-grid"> 再配 <code>grid-template-columns。这会导致：
-
.col-6的flex: 0 0 50%被完全忽略，列宽退化为内容宽度 -
.row的负外边距（margin: 0 -0.75rem）在 Grid 容器中无效，子项内边距未被抵消，列间间隙翻倍 - 所有
.col-md-4这类响应式类依赖媒体查询 + Flex 属性组合，在 Grid 下不触发重算，“断点存在但无效” - 屏幕阅读器可能误读区域关系，语义断裂
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);" - 若要复用 Bootstrap 断点值，查文档确认：
sm=576px、md=768px、lg=992px、xl=1200px、xxl=1400px - 别混用
.g-3和gap: 1rem，否则间隙叠加——统一用gap: var(--bs-gap)复用变量更安全
真正难的不是写 Grid 规则，而是彻底放弃对 .row 的路径依赖；一旦在 DOM 里还留着 .row，哪怕只是视觉上“看起来没动”，CSS 层面的 Flex 遗留样式就可能悄悄干扰 Grid 行为。
