Grid容器不能直接套在Bootstrap的.row里，因.row默认flex布局，外层设grid会覆盖flex行为导致.col失效；正确做法是移除.row，改用纯Grid容器并显式设置grid-template-columns，响应式断点须严格对齐Bootstrap定义（如md=768px），间隙控制避免.g-*类与gap叠加，推荐Bootstrap 5.3原生.grid类。
Grid容器不能直接套在 Bootstrap 的 .row 里
因为 .row 默认是 display: flex，自带负外边距和 flex 项对齐逻辑；如果在外层加 display: grid，会覆盖掉 flex 行为，导致 .col 宽度失效、间距错乱、列塌缩成单行高。
正确做法是：删掉 <div class="row">，改用纯 Grid 容器（比如 <div class="my-grid">），把 .col-* 当作普通子元素直接放进去——但必须确认这些 .col 类只用于响应式宽度（如 .col-md-6），且没被其他 flex 相关类（如 .justify-content-center）干扰。
关键点：
-
.col在 Grid 容器里不会自动占满剩余空间，必须显式设置grid-template-columns才能让宽度类生效 - 不要保留
.row或任何依赖 flex 布局的父容器类 - 如果用了
.col-auto或.col（无数字后缀），它们在 Grid 下行为不可靠，建议统一用.col-{breakpoint}-{n}格式
响应式断点要对齐 Bootstrap 的 $grid-breakpoints
Bootstrap 的 md 断点是 768px（含），sm 是 576px；如果你写 @media (min-width: 769px)，那 .col-md-6 就不会触发，Grid 列数和类名预期就脱节了。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 查文档确认数值：xs=0、sm=576px、md=768px、lg=992px、xl=1200px、xxl=1400px
- 写媒体查询时严格对齐，例如：
@media (min-width: 768px) { .my-grid { grid-template-columns: repeat(2, 1fr); } } - 如果项目用 Sass，直接复用
$grid-breakpoints变量，避免硬编码
gap 和 Bootstrap 的 .g-* 类混用会叠加
.g-3 底层就是 gap: 1rem；如果你同时给容器设了 gap: 1rem 和 class="g-3"，最终间隙会变成 2rem，视觉上明显撑开。
选择一种方式控制间隙：
- 纯 Grid 场景：删掉所有
.g-*类，只用gap、row-gap或column-gap - 混合场景（部分区域仍用 Bootstrap 栅格）：统一用
.g-*，并在 Grid 区域额外加style="gap: var(--bs-gap)"复用 Bootstrap 的 CSS 变量 - 注意：
--bs-gap默认是1rem，但可能被项目级$spacerSass 变量修改，别写死数值
Bootstrap 5.3 的原生 .grid 类比手写更省事
Bootstrap 5.3 开启了实验性 CSS Grid 支持，只需启用 $enable-cssgrid: true（Sass 环境），或直接用 CDN 提供的预编译版本，就能用 .grid + .g-col-4 这类类名快速布局。
它和传统栅格不冲突，但要注意：
-
.grid容器不兼容.row，二者不能嵌套 -
.g-col-4表示占 12 列中的 4 份，和.col-md-4语义一致，但底层是 Grid 而非 Flex - 响应式前缀也支持，比如
.g-col-md-6，原理同.col-md-6，只是作用于 Grid 容器
真正容易被忽略的是：Grid 的子项一旦设置了 height 或 min-height，会破坏等高逻辑；卡片、表单控件这类组件内部常带固定高度，得手动重置。
