不能直接用原生 css grid 替代 bootstrap 5 的 flexbox 网格，因为 .row 和 .col 类专为 flex 设计，强行设 display: grid 会破坏负外边距、列宽计算和响应式逻辑；bootstrap 5.3+ 提供独立的 .grid + .g-col-* 工具类实现真正 grid 布局，需确保版本≥5.3.0 且 css 文件包含 _grid.scss 编译结果。
不能直接用原生 CSS Grid “替代” Bootstrap 5 的 Flexbox 网格，因为 .row 和 .col 类本身不兼容 display: grid；但你可以绕开它们，用 Bootstrap 5.3+ 新增的 .grid + .g-col-* 工具类实现真正的 CSS Grid 布局。
为什么不能给 .row 加 display: grid？
强行覆盖 .row 的 display 会立刻触发一系列连锁失效：
-
.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 方案：用 .grid 和 .g-col-*
从 5.3 版本起，Bootstrap 提供了一套独立于传统栅格的 CSS Grid 工具类，它不依赖 .row/.col，也不破坏原有 Flex 栅格，属于“并行可用”的新能力。
- 启用前提：确保你用的是
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">左侧</div> <div class="g-col-4">主区</div> <div class="g-col-4">右侧</div> </div>
什么时候该用 .grid，而不是改写 .row？
选 .grid 的典型场景是需要二维控制力，而 Flexbox 天然乏力的地方：
- 仪表盘类布局：需跨行（
grid-row: span 2）或跨列（grid-column: span 3），比如一个统计卡片横跨两行、另一个窄侧边栏固定在右上角 - 卡片等高且需复杂对齐：Grid 天然等高，无需
.h-100或.d-flex嵌套，align-items: start也更可控 - 避免 Flex 嵌套污染 DOM：比如你只需要一个区域用 Grid，其余仍走 Bootstrap 栅格，混用无冲突
- IE11 兼容性不是硬需求：CSS Grid 在 IE 中基本不可用，若项目仍需支持，就别碰
.grid
容易被忽略的关键细节
很多人试了 .grid 发现没效果，问题往往出在这些地方：
- 没加
width: 100%或父容器未设宽度 —— Grid 容器不会自动撑满，尤其嵌套在.container内时，要确认外层有明确宽度上下文 - 误以为
.g-col-*支持百分比值或auto—— 它只接受整数（1–12），且计算基于隐式网格轨道，不支持minmax()或fr单位 - 想用
grid-template-areas配合.g-col-*—— 不行。.g-col-*是基于grid-template-columns的简写，二者无法混用；真要用命名区域，就得手写 CSS - 在旧版 Bootstrap（
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
