不能直接在 .row 上加 display: grid，因 .row 默认 flex 布局含负外边距与 flex-basis 计算，与 grid 轨道分配逻辑冲突，导致布局错乱、间距异常、响应式失效；应分层隔离：bootstrap 作结构骨架，grid 作内容画布，彻底切换并清理残留类。
不能直接在 .row 上加 display: grid，也不能把 .col-* 塞进原生 Grid 容器里——这两者底层逻辑冲突，强行混用只会让布局错乱、间距爆炸、响应式失效。
为什么 .row + display: grid 会崩
.row 默认是 display: flex，还带负外边距（margin: 0 -15px）、flex-wrap: wrap 和子项 flex-basis 计算逻辑。一旦你给它加 display: grid：
-
.col-6的flex: 0 0 auto和width: 50%仍生效，但 Grid 不认这个，子项不会按轨道分配，而是挤成一列或塌缩 - 负外边距还在，但 Grid 没有“行内间隙补偿”机制，导致左右留白异常甚至内容溢出
- Chrome DevTools 里看到的
computed styles里grid-column-start是auto，但宽度却被.col-6的width锁死——谁也没赢，只是打架
真正能落地的混合方式：容器分层，职责隔离
把 Bootstrap 当结构骨架，Grid 当内容画布。比如后台面板：.container → .row（Header/Sidebar）→ 再开一个纯 Grid 容器放 Dashboard 区域：
- 删掉所有
.row和.col类，改用语义化 class，如dashboard-grid - Grid 容器上显式写
display: grid和grid-template-columns，别依赖 Bootstrap 的.grid类——它只设display: grid，啥都不管 - 复用 Bootstrap 的断点数值（
sm: 576px,md: 768px等），在@media里切grid-template-columns，别自己瞎猜 - 间隙统一用
gap: var(--bs-gap)，而不是同时加g-3和gap: 1rem——后者会让 gap 翻倍
.g-col-* 和手写 grid-column 别混着用
Bootstrap 5.3 的 .g-col-4 是实验性类，它靠 grid-column: span 4 实现，但只在 .grid 容器下有效。问题在于：
- 它和你自己写的
grid-column: 2 / -2或grid-area冲突，CSS 层叠顺序取决于引入顺序，很难 predict -
.g-col-*不响应媒体查询，.g-col-md-6并不存在——Bootstrap 没提供响应式版本的g-col - 如果你用了
$enable-cssgrid: true，也别指望.col-6在 Grid 容器里还能占 6 列；它只对 Flex 容器有效
最稳的路是：要么全用 Bootstrap 栅格（Flex），要么在关键动态区域彻底切换到原生 Grid，并把 HTML 结构也清干净——别留半个 .col 在那儿碍事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
