bootstrap 5 的 .row 默认是 display: flex，不是 display: grid；所谓“grid 模式”是常见误解，官方栅格系统底层仍为 flexbox，强行设 grid 会导致 .col-* 类失效、负 margin 冲突及列宽塌缩。
Bootstrap 的 .row 默认不是 display: grid
直接说结论：Bootstrap 5 的 .row 仍然是 display: flex，不是 display: grid。所谓“Bootstrap 支持 Grid”是常见误解，官方栅格系统从未切换底层实现。你给 .row 强加 display: grid，会导致 .col-* 类失效、负 margin 与 gap 冲突、列宽塌缩成单行高。
常见错误现象：.g-3 间距消失、.offset-md-2 不起作用、.col-md-6 在窄屏下突然撑破容器——因为所有这些类都依赖 Flexbox 的 flex-basis、margin-left: auto 和流式换行逻辑。
实操建议：
- 真要用 Grid，就删掉
.row，直接给容器加display: grid和grid-template-columns - 别混用
.row和grid—— 它们属于两套互斥的布局协议 - Bootstrap 5.3 的
.grid/.g-col-*是实验性工具集，不兼容.col-*，启用需全量替换且仍受限于 12 列默认值
Grid 布局逻辑必须收在 CSS 里，不能靠 HTML 类名推导
Bootstrap 的 col-md-6 是一个“行为封装”：它在 min-width: 768px 下把元素设为 flex: 0 0 50%；而 CSS Grid 没有这种自动映射，grid-column: span 4 不会因为你写了 col-4 就生效。
响应式断点必须手动绑定。例如想让某区块在中屏占 6 列、大屏占 4 列，得写：
.my-section { grid-column: span 12; }
@media (min-width: 768px) { .my-section { grid-column: span 6; } }
@media (min-width: 992px) { .my-section { grid-column: span 4; } }
容易踩的坑：
- 在一个元素上叠加多个
grid-column类（如同时加.col-6和.col-lg-4），CSS 层叠会让后者覆盖前者，但维护成本高 - 误以为
repeat(12, 1fr)能直接替代 Bootstrap 的 12 列语义——它只定义轨道，不提供 gutter、偏移或子项占位能力 - 给 Grid 子项设
width或margin，干扰grid-column的起始位置计算
什么时候该用 Grid，什么时候还得留着 .col 类
用 Grid 的核心判断标准是：你要控制的是「二维空间关系」。比如仪表盘里 header 跨三列、sidebar 固宽、main 自适应、footer 拉通底部，且需要在不同断点下重排区域顺序（grid-template-areas 一行就能改）——这时硬套 .row/.col-md-6 反而增加 DOM 层级、干扰语义、让响应逻辑散落在 HTML 里。
而当你依赖的是「组件级行为」而非布局逻辑时，.col 类仍有不可替代性：
- 表单控件对齐（
.form-control与.col配合的垂直居中逻辑） - 模态框定位、折叠导航栏的 JS 交互（
data-bs-toggle触发机制） - 团队协作中设计师交付的是基于 Bootstrap 断点的设计稿，改用 Grid 意味着同步调整所有标注和评审流程
真正容易被忽略的是：Grid 的自由度越高，对开发者 CSS 理解深度的要求也越明确。一个没搞清 minmax(0, 1fr) 和 1fr 区别的同学，写出来的 Grid 在小屏下照样横向滚动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
