bootstrap 5 默认使用 flexbox 而非 css grid，需通过 scss 编译并设置 $enable-cssgrid: true 才能启用 grid 模式，此时 .row 变为 display: grid，列宽由 grid-template-columns 控制，对齐方式须改用 grid 属性。
Bootstrap 5 默认不启用 CSS Grid 模式，它用的是 Flexbox；但你确实可以手动开启 Grid 支持，前提是编译 SCSS 并正确配置变量。
如何在 Bootstrap 5 中启用 CSS Grid
启用不是改个 class 或加个属性就能生效的，必须走 SCSS 编译流程：
- 在自定义 SCSS 文件顶部（导入 Bootstrap 之前）定义：
$enable-cssgrid: true - 确保你的变量覆盖写在
@import "bootstrap/scss/functions";之前，否则会被默认值覆盖 - 使用 Dart Sass 编译，不能直接引用 CDN 上的
bootstrap.min.css—— 那里面没有 Grid 规则 - 编译后生成的 CSS 文件里，
.row类会变成display: grid，且列宽由grid-template-columns控制，不再是 Flex 的flex计算
启用 Grid 后 .row 和 .col 行为变化
启用了 $enable-cssgrid: true，.row 不再是 Flex 容器，这会直接影响布局逻辑：
-
.row失去负外边距（margin-left/right: -$grid-gutter-width），所以你得靠gap控制列间距，而不是依赖父容器“抵消”子项内边距 -
.col类不再依赖flex-basis，而是靠grid-column和隐式轨道分配，比如.col-6会转成grid-column: span 6 - 嵌套
.row时，子.row默认不会继承父网格——除非你显式设display: subgrid（需浏览器支持，目前仅 Firefox 稳定支持） - 如果你混用 Flex 和 Grid 模式（比如部分页面用编译版 Grid，部分仍引 CDN Flex 版），
.row行为不一致，极易导致列宽塌缩或错位
Grid 模式 vs Flex 模式实际影响
别只看“更现代”，得看真实项目里的取舍：
- 开发效率：Grid 模式下等分列更直观（
.col不写数字就自动均分），但断点控制变弱——.col-md这类响应式类在 Grid 模式下仍可用，但底层是靠媒体查询重写grid-template-columns，不如 Flex 的flex属性响应快 - 维护成本：Grid 模式需要你管理更多 CSS 变量（如
--bs-columns、--bs-gap），而 Flex 模式靠预设类名即可覆盖大部分场景 - 兼容性：Grid 模式在 IE11 完全不可用；Flex 模式最低支持到 IE10（虽有 bug，但可降级）；即使现代浏览器，Safari 对
subgrid支持也刚落地不久 - 文件体积：启用 Grid 后，CSS 体积平均增加 8–12KB（gzip 前），主要来自重复的媒体查询和
grid-column规则
真正容易被忽略的是：一旦启用 Grid 模式，你就不能再依赖 .row 的 Flex 行为做对齐（比如 justify-content-between 会失效），所有对齐逻辑得迁移到 justify-items、align-content 等 Grid 属性上——而这些在响应式断点中很难统一控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
