Bootstrap 5 官方标准发行版（含5.3）仍以Flexbox为栅格底层，不提供开箱即用的CSS Grid栅格系统；所谓Grid功能仅限实验性配置或第三方扩展，.d-grid仅为display工具类，无法替代原生栅格逻辑。
Bootstrap 5 官方不提供开箱即用的「CSS Grid 栅格系统」——所谓「Bootstrap 5 的 CSS Grid 系统」仅存在于实验性配置或第三方扩展中，标准发行版（包括 5.3）仍以 Flexbox 为栅格底层。想实现非对称响应式布局，必须绕过 .row/.col，手动写 Grid 规则。
为什么 .d-grid 不能替代 Bootstrap 栅格？
.d-grid 只是 Bootstrap 提供的一个 display 工具类，它只设置 display: grid，不定义任何列轨道、断点行为或 12 分栏逻辑。把它加在 .row 上会直接破坏负外边距机制，导致子元素塌缩、间距错乱、.col 类失效。
- 常见错误：给
<div class="row d-grid">加grid-template-columns，但.col-6仍按 flex 渲染，宽度计算完全失控 - 真正可用的起点是独立容器：
<div class="my-dashboard">，而非套用.container > .row > .col - 如果你依赖
col-md-4这类语义化断点，Grid 就得自己配媒体查询，无法复用 Bootstrap 的--bs-breakpoint-md变量自动切换
如何用原生 Grid + Bootstrap 变量写非对称响应式布局？
Bootstrap 5 内置的 CSS 变量（如 --bs-gutter-x、--bs-breakpoint-md）可以直接在自定义 Grid 规则中引用，避免硬编码像素值。
- 基础结构示例：
.my-layout { display: grid; grid-template-columns: 3fr 1fr; gap: var(--bs-gutter-x); } @media (min-width: 768px) { .my-layout { grid-template-columns: 2fr 1fr 1fr; } } @media (min-width: 992px) { .my-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr); } } - 关键点：
minmax(0, Xfr)防止内容撑破容器；gap: var(--bs-gutter-x)复用 Bootstrap 默认间距（1rem），无需重复定义 - 别用
col类混入 Grid 容器——flex-basis和max-width会干扰grid-column自动分配
怎样避免和 Flexbox 栅格冲突？
最稳妥的做法是物理隔离：Grid 布局区块不嵌套在 .container 或 .row 内，也不让 .col 子元素出现在 Grid 容器里。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<div class="container"><div class="row"><div class="col"><div class="my-grid">...</div></div></div></div>——.col的flex属性会污染内部 Grid 的子项尺寸 - 正确写法：
<div class="container">...</div><div class="my-grid">...</div><div class="container">...</div>，Grid 容器作为兄弟节点独立存在 - 如果必须嵌套（比如仪表盘里某个卡片区域），用
display: contents或移除.col类，仅保留语义化 wrapper 元素
真正麻烦的不是写 Grid，而是决定在哪切——哪些区域值得用 Grid 的二维控制力（跨行/区域命名），哪些仍用 Bootstrap 的 Flex 栅格更省事。IE11 兼容性仍是硬门槛，只要项目还要求支持它，Grid 就得配 Flex fallback，而这个 fallback 往往比 Grid 本身更费神。
