通过 grid-auto-rows 与 minmax() 结合可实现 CSS Grid 子元素高度自适应，.grid-container 设置 grid-auto-rows: minmax(80px, auto) 时，行高最小 80px、内容多时自动扩展；应用于卡片布局如 .card-grid 使用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 和 grid-auto-rows: minmax(100px, auto)，实现响应式列宽与自适应行高，同理 align-self: start 可防止子元素拉伸。
在使用 CSS Grid 布局时，让子元素高度自适应容器或内容是一个常见需求。通过 grid-auto-rows 与 minmax() 单位的结合，可以灵活控制网格行的高度行为，实现真正的自适应布局。
理解 grid-auto-rows 的作用
grid-auto-rows 用于定义网格容器中隐式创建的行的高度。当子元素数量超出显式定义的行数时，浏览器会自动创建额外的行，这些行的高度由 grid-auto-rows 控制。
例如：
.grid-container {display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
}
上面代码会让所有自动创建的行高度为 100px。但若想让高度随内容变化，就需要引入 minmax()。
使用 minmax() 实现高度自适应
minmax(min, max) 函数允许你为网格轨道（行或列）设置一个尺寸范围。它可以确保行高不会小于最小值，也不会超过最大值，同时在范围内自由伸缩。
让行高自适应内容的常用写法是：
.grid-container {display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(80px, auto);
}
这里 minmax(80px, auto) 表示：每行最小高度为 80px，最大为 auto（即根据内容自动撑开）。这样既保证了基本高度，又允许内容多时自然扩展。
实际应用场景示例
假设你有一个卡片布局，每张卡片内容长度不一，希望每行卡片高度一致且能随最长内容自适应：
.card-grid {display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: minmax(100px, auto);
gap: 16px;
}
这种设置下：
- 列宽响应式，每列至少 250px，最多 1fr
- 行高至少 100px，内容多时自动增高
- 同一行内的子元素会拉伸到相同高度（Grid 默认对齐行为）
注意事项与兼容性
minmax() 和 grid-auto-rows 在现代浏览器中支持良好（IE 除外）。若需兼容旧版浏览器，应避免使用这些特性或提供降级方案。
另外，如果希望子元素不被拉伸，可设置：
.grid-item {align-self: start;
}
这会让每个项目只占据自身内容所需高度，不再随行拉伸。
基本上就这些。合理使用 grid-auto-rows 和 minmax()，能让 Grid 布局在保持结构的同时具备良好的高度自适应能力。不复杂但容易忽略细节。
