bootstrap 5 默认栅格底层是 flexbox，不能直接给.row加display: grid；因.row含负外边距且.col-*宽度逻辑依赖flex行为，强行切换会导致列宽塌缩、间隙错乱、断点失效。
Bootstrap 5 的默认栅格（.row + .col-*）底层是 Flexbox，不能靠加个 display: grid 就变成 Grid 布局；想真正用 CSS Grid 替代，必须绕开 .row 结构、手动控制 grid-template-columns，并避免混用类名。
为什么不能直接给 .row 加 display: grid
因为 .row 自带负外边距（margin: 0 -15px），且所有 .col-* 的宽度逻辑都基于 Flex 子项行为。一旦强制设为 display: grid，负 margin 不再生效，.col-6 这类类名的 width 计算完全失效——常见现象包括列宽塌缩成单行高、间隙翻倍、响应式断点不触发。
这不是浏览器 bug，而是两种布局模型根本冲突：Flexbox 管“一维流”，Grid 管“二维轨道”，强行嫁接只会让子元素定位错乱。
- 别写
<div class="row d-grid"> —— <code>.d-grid只改 display，不重置.row的 margin 和 padding 逻辑 - 别把
.col-4直接塞进.d-grid容器里——它不会自动占 4/12 宽度，因为 Grid 下没有“12 列”概念 - 如果用了
gap，又保留.row的负 margin，实际间距会变成gap + 30px，视觉上严重错位 - 必须手动声明
grid-template-columns，否则默认单列（比如grid-template-columns: repeat(3, 1fr)） - 响应式要用媒体查询或 Bootstrap 的断点工具类（如
d-md-grid），不能依赖.col-md-6——后者只对 Flex 容器有效 -
.d-grid容器内子元素不继承.col-*行为，若需等宽五列，直接写style="grid-template-columns: repeat(5, 1fr)"最稳妥 - 搭配
.gap-3控制间距时，注意它等价于gap: 1rem，和原生gap属性行为一致 - 列轨道推荐用
repeat(5, minmax(0, 1fr))而非repeat(5, 1fr)，防止内容撑破容器 - 要实现类似
.col-md-6的响应式行为，必须手写媒体查询：@media (min-width: 768px) { .grid-5 { grid-template-columns: repeat(2, 1fr); } }—— Bootstrap 的md断点值是768px，不是767px或769px - 子元素不需要加
.col-*类，但如果项目中已大量使用，可保留它们仅作响应式宽度提示（例如.col-12.col-md-6），前提是父容器显式设置了grid-template-columns - 避免在 Grid 子项上设
width、margin或float，这些会干扰grid-column的起始线计算 -
$enable-cssgrid: true必须写在@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/bootstrap"之前，路径按你项目中node_modules实际位置调整 - 启用后，
<div class="grid"><div class="g-col-6"></div></div>才有效；.g-col-6表示占 6/12 轨道，不是像素或百分比 -
.g-col-*仅适用于.grid容器，放进.row或普通div里无效 - 它仍依赖 12 列体系，所以
.g-col-5依然不存在——5 不是 12 的约数；想五等分，还是得用grid-template-columns: repeat(5, 1fr)
如何用 .d-grid 快速启用 Grid 布局
.d-grid 是 Bootstrap 5 提供的实用工具类，只负责设置 display: grid，其余全靠你补全。它适合仪表盘卡片、图标网格、表单字段分组等二维控制强的场景，但不带任何列数或断点逻辑。
用原生 display: grid 替代 .row 的实操要点
最干净的做法是彻底弃用 .row 和 .col-*，新建语义化容器（如 .grid-5），用纯 CSS Grid 实现。这样既避开 Flex/Grid 混用风险，也便于复用 Bootstrap 的断点变量。
启用 $enable-cssgrid: true 后的 .g-col-* 类怎么用
Bootstrap 5.2+ 提供了实验性 Grid 栅格类（.grid + .g-col-*），但必须提前在 Sass 中启用变量，且不能和传统 .row/.col-* 混用。
真正难点不在语法，而在于意识切换：Grid 不是 Flex 的升级版，它是另一套坐标系。混用两类布局，就像在 Excel 里套用 Word 的段落格式——表面能跑，但只要内容变复杂、断点增多、嵌套加深，错位就会从边缘蔓延到核心。
