bootstrap 5 默认不启用css grid栅格，.row为flex布局；启用grid需重编译scss并设$enable-cssgrid:true，或弃用.row/.col改用.d-grid+手写grid-template-columns。
Bootstrap 5 默认不启用 CSS Grid 栅格，.row 始终是 display: flex；想用 Grid 替代 Flex 栅格，只有两条路：要么自己编译 SCSS 并开启 $enable-cssgrid: true，要么绕开 .row/.col 结构，纯手写 Grid 容器 + Bootstrap 工具类辅助。
直接给 .row 加 display: grid 会崩溃
这是最常踩的坑。强行在已有 .row 上加 style="display: grid" 或覆盖 CSS 规则，会导致：
-
.col-6的flex: 0 0 50%在 Grid 容器里完全失效，列宽塌缩成默认尺寸 -
.row的负外边距（margin: 0 -0.75rem）失去作用，子项内边距不再被抵消，间隙翻倍或错位 - 所有响应式断点（如
.col-md-6）的媒体查询仍按 Flex 逻辑注入，但 Grid 下不触发宽度重算，断点“失效”
启用官方 Grid 模式需重新编译 SCSS
Bootstrap 5 确实支持 Grid 模式，但只存在于源码中，必须手动配置并构建：
- 在导入 Bootstrap SCSS 前定义：
$enable-cssgrid: true，且必须放在@import "bootstrap/scss/functions"之前 - 使用 Dart Sass 编译，CDN 上的
bootstrap.min.css不含 Grid 规则，直接引用无效 - 编译后
.row变为display: grid，.col-6转为grid-column: span 6，gap替代负外边距控制间距 - 嵌套
.row不自动继承父网格，需显式设display: subgrid（仅 Firefox 稳定支持，Safari 刚落地）
用 .d-grid + 手写 template-columns 更轻量可靠
不改构建流程、不碰 SCSS，也能用 Grid——关键是彻底放弃 .row/.col 嵌套，用 .d-grid 类创建干净容器：
-
.d-grid只负责display: grid，不带任何列数、断点或间距逻辑，必须手动写grid-template-columns - 响应式要靠媒体查询或
d-sm-grid d-md-grid切换类名，并配不同grid-template-columns，例如：style="grid-template-columns: repeat(2, 1fr);"配合d-md-grid - 别把
.col-4加在.d-grid子项上——它依赖 Flex 属性，在 Grid 容器里无意义；跨列用style="grid-column: span 2;" - 推荐用 Bootstrap 的
gap-3等工具类控制间距，比写gap: 1rem更一致
混用 Flex 和 Grid 工具类极易失控
比如在 .d-grid 容器里塞一个 .d-flex 子项，或给 Grid 子项加 justify-content-center，结果往往：
-
justify-content在 Grid 容器里对子项无效，得用justify-items或place-items -
.d-flex子项内部若再用.col，Flex 和 Grid 两套宽度计算逻辑打架，列宽忽大忽小 - 所有对齐、顺序、换行类（
flex-wrap、order、align-self）在 Grid 子项上行为完全不同，不能凭经验套用
真正难处理的不是语法，而是心智模型切换：Grid 是二维轨道控制，Flex 是一维流式分配；一旦开始用 Grid，就得告别“占几列”的思维，转而思考“占几格”和“在哪条轨道”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
