grid子项默认不拉伸，因align-items: stretch仅对无块轴尺寸约束的子项生效；1fr需容器有明确高度上下文才能分配剩余空间；实现等高需配合grid-auto-rows与子项min-height: 0及height: 100%。
Grid子项默认不拉伸，因为align-items: stretch只在无尺寸约束时生效
Grid容器的align-items: stretch（默认值）看似和Flex的align-items: stretch一样，但实际行为差异极大：它**只对未声明块轴尺寸（height/min-height/max-height）的子项起作用**。一旦子项写了height: 200px或min-height: 100px，stretch立刻失效——这不是bug，是规范明确要求的优先级逻辑。
常见错误现象：
- 子项设了
height: fit-content，结果整行塌缩 - 卡片用
min-height: 200px防内容过少，反而导致grid-template-rows: 1fr完全不响应 - 开发者工具里看到
align-items: stretch亮着，但高度就是不动
1fr不是“自动拉伸”，而是“按比例分剩余空间”
1fr单位本身不拉伸子项，它只是把父容器**当前可用的块轴空间**等分。如果父容器高度是auto（比如没设height、min-height，也没被Flex/Grid父级约束），那它就没有“剩余空间”可分，1fr就退化为auto。
必须满足的条件：
- Grid容器自身要有明确高度上下文（如
min-height: 100vh或嵌套在flex: 1容器中） - 父级链上不能有任意一层是
height: auto（检查html→body→外层容器） - 若Grid在Flex容器内，需同时加
height: 100%和min-height: 0防Flex项默认拉伸干扰
Flex能“自动拉伸”靠的是主轴+交叉轴双默认行为，Grid没有这种隐式假设
Flex容器默认flex-direction: row + align-items: stretch，天然形成“横向分配+纵向拉伸”的组合；而Grid是坐标系思维，它不预设你想要拉伸——你得明确告诉它怎么划分轨道（grid-template-rows）、怎么处理隐式行（grid-auto-rows）。
典型误操作：
- 只写
display: grid，不写grid-template-rows或grid-auto-rows，指望子项自己“感知”要拉伸 - 用
grid-auto-flow: column却期待行方向自动等高——column流下，grid-auto-rows才管行高，grid-auto-columns管列宽 - 把Grid当Flex用，在导航菜单里硬套
1fr，结果文字长短不一导致列宽失衡
想让Grid子项“看起来像Flex那样拉伸”，得组合控制轨道与子项
真正起作用的不是单个属性，而是轨道定义 + 子项约束的配合。例如实现卡片等高网格：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-auto-rows: minmax(200px, 1fr); /* 关键：隐式行也设最小高度 */
gap: 16px;
}
.card-grid > * {
min-height: 0; /* 解除子项默认最小高度锁 */
height: 100%; /* 让子项能填满轨道 */
}
注意点：
-
grid-auto-rows比grid-template-rows更适合动态数量场景 -
min-height: 0必须加在子项上，否则height: 100%无效 - 图片/文本容器需额外加
overflow-wrap: break-word或max-width: 100%，防内容撑破轨道
真正难的不是记住1fr，而是每次写Grid前先问一句：父容器的高度链是否完整？子项有没有悄悄写死尺寸？轨道定义是否覆盖了所有可能的行数？这三个点漏掉任何一个，拉伸就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
