.d-grid 直接触发 CSS Grid 布局，适合精确控制行列、跨格和二维布局，而 .row 基于 Flexbox，适用于响应式内容流；混用会导致列宽失效、断点不生效。
为什么不用 .row 而用 .d-grid？
因为 .d-grid 直接触发 css grid 布局，跳过 bootstrap 默认的 flexbox 网格（.row + .col）那一套嵌套规则。它适合需要精确控制行列、跨格、对齐或二维布局的场景，比如仪表盘卡片排列、图标网格、表单字段分组——而不是响应式内容流。
常见错误现象：.row 里混用 .d-grid 子元素，或把 .col 类直接加在 .d-grid 容器上，结果列宽失效、间隙错乱、断点不生效。
-
.d-grid容器本身不带任何预设列数或断点逻辑，纯靠 CSS Grid 属性控制 - 必须手动设置
grid-template-columns或grid-template-rows，否则默认是单列 - 响应式需配合媒体查询或 Bootstrap 的
@media工具类（如d-md-grid），不能靠col-md-*类
.d-grid 配合 gap 和 template-columns 怎么写？
Bootstrap 5 的 .d-grid 只负责 display: grid，其余全靠自定义样式或内联 style。别指望它像 .row 那样自动处理间距和列宽。
典型写法示例（五列等宽，中屏及以上生效）：
<div class="d-md-grid" style="grid-template-columns: repeat(5, 1fr); gap: 1rem;"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> </div>
-
repeat(5, 1fr)是核心，表示 5 列均分容器宽度；换成auto-fit+minmax()可实现响应式列数自动收缩 -
gap推荐用 Bootstrap 内置间距工具类（如gap-3），比写gap: 1rem更一致 - 如果要支持小屏堆叠，加
d-grid d-md-grid并配不同grid-template-columns，不能只依赖d-sm-grid—— 它只控制 display，不改模板
和 .row + .col 混用会出什么问题？
会破坏 Grid 的二维布局能力，也浪费 .d-grid 的轻量优势。最常踩的坑是：把 .col-4 这类类名加在 .d-grid 的子项上，结果发现宽度没变、断点无效、justify-content 失效。
-
.col-*类内部依赖 flexbox 的flex属性，和grid容器不兼容 - Grid 子项用
grid-column/grid-row控制位置，不是col-md-6 - 想让某 item 跨两列？写
style="grid-column: span 2;"，别试图塞col-span-2—— Bootstrap 5 没这玩意 - 若需同时支持 Grid 和 Flex 布局切换，用
d-flex d-grid d-xl-grid并配合 JS 动态切类，而非硬塞两种逻辑到同一结构
什么时候该坚持用 .row + .col？
当你的布局本质是「响应式内容流」：主内容+侧边栏、标题+正文+附件、表单 label+input+help text —— 这些结构天然有阅读顺序、语义层级和断点依赖，.row + .col 的 12 列系统、断点继承、自动等高、负 margin 清除机制，比手写 Grid 更稳、更少出错。
.d-grid 不是替代品，是补充项。它省掉的是「写 CSS Grid 规则」的步骤，但没省掉「理解 Grid 布局模型」的成本。真要快速实现五列、七列、不规则跨格，就得直面 grid-area 和 auto-flow —— 这部分没法偷懒。
