<p>Bootstrap 5 的 .row 不支持 grid-template-rows 等 Grid 属性，因其是 Flex 容器；需改用 .d-grid + grid-auto-rows 或 minmax() 实现行高控制，且不可混用 .col-* 类。</p>
Bootstrap 5 的 .row 不支持直接设行高
因为 .row 是 display: flex 容器，不是 Grid，所以 grid-auto-rows、grid-template-rows 这类属性完全无效。试图给 .row 加 grid-template-rows: 100px 1fr 不会起作用，浏览器会静默忽略。
常见错误现象：在 .row 上写 style="grid-auto-rows: minmax(80px, auto);"，结果布局毫无变化，甚至导致子项错位——这是混淆了 Flex 和 Grid 的控制维度。
-
.row的“行”是视觉流概念，实际由内容撑开；它没有 CSS Grid 意义上的“行轨道” - Flex 布局中控制“高度一致性”的正确方式是
align-items: stretch（默认值），而非设置行高 - 若需固定高度容器，应包裹一层自定义
div并设display: grid，绕开.row
想用 grid-auto-rows？必须换掉 .row
要真正使用 grid-auto-rows 或 minmax() 控制行高，就得放弃 .row + .col 结构，改用原生 CSS Grid 容器。
典型做法：
立即学习“前端免费学习笔记（深入）”；
- 用
<div class="d-grid">或<div class="d-md-grid">替代<div class="row"> - 必须手动声明
grid-template-columns，否则默认单列 - 用
grid-auto-rows: minmax(80px, auto)统一后续行最小高度 - 响应式切换靠
d-sm-grid d-lg-grid配合不同style或媒体查询
示例（三列网格，行高弹性）：
<div class="d-md-grid" style="grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(80px, auto); gap: 1rem;"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div>
两栏等高但不想要拉伸？别碰 height: 100%
在 .row 中实现两列等高，height: 100% 几乎总失效——因为 .row 本身无明确高度来源，且 .col 的 height 会破坏 Flex 的 stretch 行为。
真正轻量的解法只有两个条件：
-
.row的display必须是flex（检查开发者工具确认，别信 class 名） - 所有
.col不设height、max-height、position: absolute或margin-top/auto
如果某列内容过短，又不想它被拉满，就不要依赖 .row 的 stretch，改用 align-self: flex-start 单独控制该列对齐方式。
混用 .d-grid 和 .col-* 是最常踩的坑
把 .col-6 类加在 .d-grid 的子元素上，宽度不会变成 50%，断点也不生效——因为 .col-* 的宽度逻辑基于 Flex 子项的 flex 计算，Grid 下完全失效。
Grid 子项定位靠的是 grid-column / grid-row，不是 col-md-6。
- 想跨两行？写
style="grid-row: span 2;"，不是col-span-2（Bootstrap 5 没这玩意） - 想让某个卡片占满整行？用
grid-column: 1 / -1;，不是col-12 - 用
.d-grid就彻底告别.col，否则只会得到不可预测的宽度和错乱间距
真正容易被忽略的是：CSS Grid 的行高控制能力只在你主动弃用 Bootstrap 栅格结构时才生效。一旦还想着“兼容 .col-6”，就等于在 Flex 和 Grid 之间反复横跳，结果两边都失控。
