如何在Bootstrap5中利用CSS Grid替换传统栅格？-css教程-PHP中文网

不能直接用 CSS Grid 替换 Bootstrap 5 的 .row/.col 结构，因其绑定 display: flex；强行覆盖会导致列宽塌缩、间距翻倍、响应式断点失效及语义断裂。

如何在bootstrap5中利用css grid替换传统栅格？

不能直接用 CSS Grid 替换 Bootstrap 5 的 .row/.col 结构，因为它们从设计上就绑定 display: flex；强行覆盖会立刻导致列宽塌缩、间距翻倍、响应式断点失效。

为什么给 `.row` 加 `d-grid` 会崩

常见错误是写

 再配 grid-template-columns。这会导致：

.col-6 的 flex: 0 0 50% 被完全忽略，列宽退化为内容宽度

.row 的负外边距（margin: 0 -0.75rem）在 Grid 容器中无效，子项内边距未被抵消，列间间隙翻倍
所有 .col-md-4 这类响应式类依赖媒体查询 + Flex 属性组合，在 Grid 下不触发重算，“断点存在但无效”
屏幕阅读器可能误读区域关系，语义断裂

Bootstrap 5.3+ 的 .grid + .g-col-* 怎么用
这是唯一无需自定义编译、开箱即用的官方 Grid 方案，但有硬性前提：

必须使用 bootstrap@5.3.0+，CDN 或 npm 引入的 CSS 文件需含 _grid.scss 编译结果（默认已开启）

.grid 类等价于 display: grid，并自动应用 gap: var(--bs-gap)，不用额外加 .gap-3


.g-col-4 表示占总列数的 4/12（仍沿用 12 列体系），支持 .g-col-md-3 等响应式变体
不支持 .g-col-auto 或 .g-col-xxl-*，仅限基础断点（sm–xxl）和整数份额（1–12）

示例（三栏等宽，中屏起生效）：

											
												
												
													CSS工具箱(专业版)
													全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
												
												下载
												
											
										
<div class="grid">
  <div class="g-col-4 g-col-md-4">左侧</div>
  <div class="g-col-4 g-col-md-4">主区</div>
  <div class="g-col-4 g-col-md-4">右侧</div>
</div>
用 .d-grid + 手写 grid-template-columns 更轻量可靠
适合不想升级版本、或需要精细控制行列定义的场景，但必须放弃所有 .row/.col 逻辑：


.d-grid 只设 display: grid，不带列数、断点或间距预设，必须手动写 grid-template-columns

响应式靠 d-sm-grid/d-md-grid 切换类名，并配不同 grid-template-columns，例如：style="grid-template-columns: repeat(2, 1fr);"

若要复用 Bootstrap 断点值，查文档确认： sm=576px、md=768px、lg=992px、xl=1200px、xxl=1400px

别混用 .g-3 和 gap: 1rem，否则间隙叠加——统一用 gap: var(--bs-gap) 复用变量更安全

真正难的不是写 Grid 规则，而是彻底放弃对 .row 的路径依赖；一旦在 DOM 里还留着 .row，哪怕只是视觉上“看起来没动”，CSS 层面的 Flex 遗留样式就可能悄悄干扰 Grid 行为。