Bootstrap 5 辅助类 d-grid 快速实现网格布局-Bootstrap教程-PHP中文网

.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 那样自动处理间距和列宽。

典型写法示例（五列等宽，中屏及以上生效）：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

<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 —— 这部分没法偷懒。