Bootstrap 5.3+原生支持CSS Grid布局，用grid、g-cols-3、g-gap-3等类可实现语义清晰、跨浏览器一致的等高卡片布局，无需h-100与Flex嵌套 hack。
直接用 grid 类，别再套 h-100 + d-flex + flex-column 那套了。 Bootstrap 5.3+ 原生支持 CSS Grid，一行 class="grid g-cols-3 g-gap-3" 就能实现真正语义清晰、无需 hack 的等高卡片布局，且默认跨浏览器对齐一致。
为什么 h-100 + Flex 在卡片里经常失效
很多人给每个 .card 加 h-100，再在 .card-body 上加 d-flex flex-column h-100 和 flex-grow-1，以为就能等高。但实际中常遇到：
- 父容器没设高度（比如
.row没style="height: 100%"），h-100失效 —— 它只继承父级显式高度 - 多个
.card所在的.col高度不一致（比如文字行数不同、图片尺寸浮动），Flex 无法跨列拉齐 - 小屏下
col-12单列堆叠，h-100反而把卡片撑得过高，破坏阅读节奏 - IE11 兼容需求已基本消失，没必要为它牺牲现代布局能力
grid 类怎么写才真正起作用
Bootstrap 5.3 的 grid 是独立容器类，不是对 row 的增强。它绕过 Flex 嵌套陷阱，直接启用 CSS Grid Layout：
- 必须用
<div class="grid"> 包裹卡片，不能放在 <code>.row内 —— 否则 Grid 规则被 Flex 覆盖 -
g-cols-3表示“每行最多 3 列”，自动响应断点：小屏退化为 1 列，中屏 2 列，大屏 3 列（无需额外写g-cols-sm-2） -
g-gap-3控制网格间距，等效于gap: 1rem；比mb-3更可靠，不会因卡片内容高度变化导致间隙错位 - 卡片自身不用任何高度类：
.card会自然被 Grid 行轨道拉齐，.card-body也无需h-100
<div class="grid g-cols-3 g-gap-3">
<div class="card">
<img src="..." class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">标题</h5>
<p class="card-text">任意长度的文字</p>
</div>
</div>
<!-- 更多卡片... -->
</div>兼容性与 fallback 策略
Grid 在 Chrome/Firefox/Safari/Edge 104+ 均稳定支持，唯一需留意的是旧版 Android WebView（≤4.4）和部分企业内网 IE 残留环境：
立即学习“前端免费学习笔记（深入）”；
- 如果必须支持 IE11，保留 Flex 方案，但改用
display: flex; flex-wrap: wrap的自定义容器，而非依赖.row - 不要混用
grid和row—— 同一区域只能选一种布局模型，否则计算冲突 - 可通过
@supports (display: grid)做渐进增强，但多数项目已可安全启用 - 检查是否启用了 Bootstrap 的 Grid 支持：确保你用的是 5.3+ 版本，且未在 Sass 中关闭
$enable-cssgrid: false
Grid 等高是靠行轨道（grid row track）统一分配高度，不是靠子元素“争抢”高度。这意味着哪怕某张卡片里塞了 10 行文字、另一张只有图标，它们的底部也会严格对齐 —— 这才是真正的“等高”，不是视觉模拟。
