父容器无高度导致1fr失效，因1fr需分配剩余空间；子元素设height/min-height会阻止align-items: stretch拉伸；grid-template-rows: auto放弃行高控制；Grid内Flex需flex: 1或height: 100%吸满空间。
父容器没高度，1fr 就是摆设
写了 grid-template-rows: 1fr 却不生效？大概率是父容器本身 height 是 auto。1fr 不是“自动撑高”，而是“分剩余空间”——如果父容器连自己多高都不知道，就根本没“剩余”可分。
快速验证：打开开发者工具，选中 Grid 容器，在「Computed」面板里看 height 是不是具体像素值或 100vh；如果是 auto，链路就断了。
- 最直接的修复：给 Grid 容器加
min-height: 100vh（注意 iOS Safari 地址栏收起时可能跳动） - 若 Grid 嵌在 Flex 容器里，外层 Flex 项需设
flex: 1，Grid 容器再加height: 100%+min-height: 0（防 Flex 默认最小尺寸干扰） - 避免同时写
height: 100%和min-height: 100vh——后者可能被忽略，导致百分比基准丢失
子元素自己写了 height/min-height，align-self: stretch 就失效
align-items: stretch（默认值）只在子元素**没声明块轴尺寸**时才起作用。一旦子项写了 height、min-height 或 max-height，浏览器会优先尊重这些值，stretch 被跳过。
常见误操作：重置样式库悄悄加了 min-height: 0，或者卡片组件自带 height: fit-content。
- 临时测试：给子元素加
height: unset或min-height: unset，看是否恢复拉伸 - 若需保留最小保障，改用
min-height: 200px（别设0） - 检查所有子项的
align-self计算值——只要有一个是start或显式设了尺寸，那行就无法等高
grid-template-rows 设成 auto，等于放弃控制权
只写 display: grid，不设 grid-template-rows 或 grid-auto-rows，Grid 就按内容自适应：每行高度独立计算，高卡片拉高整行，矮卡片只是“被动拉伸”到那个高度，但内部若没内容或 padding 不一致，视觉上还是露白边。
这不是 bug，是 Grid 的默认行为：grid-auto-rows 默认就是 auto。
- 固定行数：用
grid-template-rows: repeat(3, 1fr)（前提是容器有明确高度） - 动态行数：改用
grid-auto-rows: minmax(200px, 1fr)，既保底又可伸缩 - 单行填满：直接
grid-template-rows: 1fr，比留空更可控
子项内部用了 Flex，但没配 flex: 1 吸收空间
Grid 项内嵌 Flex 容器时，即使 Grid 层已拉伸到位，Flex 子项仍可能塌陷——因为 Flex 默认主轴尺寸由内容决定，不会自动占满父容器可用空间。
典型表现：卡片高度一致，但文字区和按钮之间大片留白，或图片没撑满导致底部空出。
- 给 Flex 容器加
height: 100%或min-height: 0 - 让内容区块（如描述区）加
flex: 1，强制吸收剩余空间 - 图片必须配
height: 100%+object-fit: cover，且其父容器（即 Grid 项）要有明确高度上下文 - 统一所有卡片的
box-sizing: border-box和 padding，避免视觉偏差
关键点其实就两个：父容器得有高度可分，子元素得没锁死自身尺寸。中间任何一层漏掉，撑满就成空谈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
