使用 grid-auto-rows 实现响应式行高需结合 minmax()、fr 单位和媒体查询。1. minmax(80px, auto) 设置最小行高并允许内容撑开；2. 全屏布局用 grid-auto-rows: 1fr 均分视口高度；3. 媒体查询在不同断点调整列数与行高，如大屏3列60px、小屏单列40px；4. 内容自适应场景用 minmax(120px, max-content) 平衡可读性与扩展性，配合 flex 布局优化卡片内容排列。
使用
制作响应式行高，关键在于结合 CSS 的
、
单位和媒体查询，让网格容器中的每一行自动适应内容或视口变化。下面介绍几种实用方法。
1. 使用 minmax() 设置弹性行高
通过
可以定义行高的最小值和最大行为方式，实现基础的响应式效果。
说明：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
minmax(80px, auto)
：每行至少 80px 高，内容超出时自动撑开。
在小屏幕上，列数减少，行高保持可读性；大屏上内容分布更宽松。
2. 结合 fr 单位创建等高响应行
如果希望行高随容器尺寸动态拉伸（比如全屏布局），可用
单位。
立即学习
“
前端免费学习笔记（深入）
”；
说明：
每个直接子元素占据一个网格轨道，行高均分整个视口高度。
屏幕尺寸变化时，所有行等比缩放，适合轮播页或分步引导。
3. 响应式断点中调整 grid-auto-rows
不同屏幕尺寸下，用媒体查询切换行高策略。
说明：
大屏：3列，行高稍高；中屏：2列，压缩行高；小屏：单列，更紧凑。
配合
或
更灵活。
4. 与内容自适应结合（文字/图片）
当网格内包含图片或段落时，确保行高不会导致溢出或挤压。
说明：
允许行高根据内容自然扩展，但可能影响性能。
用
平衡紧凑性与可读性。
基本上就这些。关键是根据布局需求选择合适的单位组合，并测试多设备表现。
grid-auto-rowsminmax()frminmax()
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: minmax(80px, auto);
gap: 16px;
}
fr
.fullscreen-grid {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: 1fr;
height: 100vh;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(60px, auto);
gap: 12px;
}
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(50px, auto);
}
}
@media (max-width: 480px) {
.grid {
grid-template-columns: 1fr;
grid-auto-rows: minmax(40px, auto);
}
}
auto-fitauto-fill
.content-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(120px, max-content);
}
.card {
display: flex;
flex-direction: column;
justify-content: center;
padding: 12px;
}
max-contentminmax(120px, max-content)