<p>grid-template-rows: 1fr 不生效是因为容器高度未定义，导致 fr 退化为 auto；必须显式设置 height 或 min-height（如 min-height: 0 或 calc(100vh - 120px)）才能激活 fr 分配逻辑。</p>
grid-template-rows: 1fr 不生效，因为容器没高度
容器高度未定义时，1fr 直接退化为 auto，所有行按内容撑开，align-items: stretch 失去拉伸目标。这不是 bug，是 Grid 的计算逻辑：fr 单位分配的是“剩余空间”，没有空间可分，就只能 content-fit。
必须给容器加 height 或 min-height，哪怕只是 min-height: 0（配合 flex 嵌套时尤其关键）；若用响应式布局，常见做法是：min-height: calc(100vh - 120px) 或基于视口的 min-height: 50vh。
- 别依赖父容器“自然撑高”——Grid 容器不会继承高度，除非父级明确设了
height或display: flex+flex-direction: column+flex: 1 - 用浏览器开发者工具 Layout 面板勾选 “Highlight grid tracks”，一眼就能看出轨道是否真被渲染成 fr 行
-
grid-template-rows: repeat(auto-fit, 1fr)在高度不确定时无效，它只控制列数，不解决行高问题
align-items: stretch 看起来没用，其实是子项在“拒绝拉伸”
align-items: stretch 是默认值，但它对设置了 height、max-height、min-height 或 align-self 的子项完全失效。更隐蔽的是：min-height: auto（某些框架或重置样式会注入）也会禁用 stretch 行为。
检查每个子项的 Computed 样式，重点关注：height、min-height、align-self、box-sizing。常见干扰源：
立即学习“前端免费学习笔记（深入）”；
- 子项内部是
display: flex，但没设height: 100%或min-height: 0，导致 flex item 默认最小高度阻止 shrink - 图片没加
height: 100%+object-fit: cover，撑破单元格 - 用了
grid-row: span 2—— 跨行项脱离当前行 stretch 约束，直接破坏对齐一致性
想让卡片底部对齐，别碰 align-content
align-content 只在多行且容器交叉轴有剩余空间时才起作用，对单行或高度刚好填满的容器完全无效。它不管“每行多高”，只管“多行整体怎么排”。卡片高度不一致时调 align-content: center，等于对空气下指令。
真正控制卡片视觉等高的，是两层动作：
- 容器层：用
grid-auto-rows: minmax(200px, 1fr)（推荐）或grid-template-rows: repeat(auto-fit, minmax(200px, 1fr))，确保每行有最小保障 - 卡片层：每个子项设
display: flex+flex-direction: column，内容区加flex: 1，按钮区加margin-top: auto，这样文字多少都不影响底部锚点 - 别忘了给卡片加
min-height: 0—— 这是 flex 嵌套在 Grid 中能正常 shrink 的前提
响应式卡片网格中高度错位，根源常在 gap 和 box-sizing
当使用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 时，gap 会参与容器总高度计算，而不同屏幕宽度下列数变化，导致行数动态增减，grid-auto-rows 的行为也随之浮动。更麻烦的是：box-sizing: content-box（尤其在未重置的旧项目中）会让 padding 和 border 撑出单元格边界，视觉上“高出一截”。
稳定做法：
- 统一设
box-sizing: border-box在根或容器上 - 把
gap拆成padding+margin模拟，避免 gap 参与行高计算（尤其在需要严格等高的仪表盘场景） - 用
aspect-ratio: 4/3控制图片容器，比硬写height更健壮 - 调试时临时加
* { outline: 1px solid red !important; }，快速暴露真实尺寸和溢出
实际项目里最常被忽略的，不是哪个属性该写，而是Grid 行高约束和卡片内部弹性布局必须协同生效——前者定骨架，后者填血肉。少一个，对齐就断链。
