使用 grid-auto-rows 实现响应式行高需结合 minmax()、fr 单位和媒体查询。1. minmax(80px, auto) 设置最小行高并允许内容撑开；2. 全屏布局用 grid-auto-rows: 1fr 均分视口高度；3. 媒体查询在不同断点调整列数与行高，如大屏3列60px、小屏单列40px；4. 内容自适应场景用 minmax(120px, max-content) 平衡可读性与扩展性，配合 flex 布局优化卡片内容排列。
使用 grid-auto-rows 制作响应式行高，关键在于结合 CSS 的 minmax()、fr 单位和媒体查询，让网格容器中的每一行自动适应内容或视口变化。下面介绍几种实用方法。
1. 使用 minmax() 设置弹性行高
通过 minmax() 可以定义行高的最小值和最大行为方式，实现基础的响应式效果。
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-auto-rows: minmax(80px, auto); gap: 16px;}
说明：
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情 minmax(80px, auto)：每行至少 80px 高，内容超出时自动撑开。 在小屏幕上，列数减少，行高保持可读性；大屏上内容分布更宽松。
2. 结合 fr 单位创建等高响应行
如果希望行高随容器尺寸动态拉伸（比如全屏布局），可用 fr 单位。
立即学习“前端免费学习笔记（深入）”；
.fullscreen-grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; height: 100vh;}
说明：
每个直接子元素占据一个网格轨道，行高均分整个视口高度。 屏幕尺寸变化时，所有行等比缩放，适合轮播页或分步引导。
3. 响应式断点中调整 grid-auto-rows
不同屏幕尺寸下，用媒体查询切换行高策略。
.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); }}
说明：
大屏：3列，行高稍高；中屏：2列，压缩行高；小屏：单列，更紧凑。 配合 auto-fit 或 auto-fill 更灵活。
4. 与内容自适应结合（文字/图片）
当网格内包含图片或段落时，确保行高不会导致溢出或挤压。
.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-content 允许行高根据内容自然扩展，但可能影响性能。 用 minmax(120px, max-content) 平衡紧凑性与可读性。基本上就这些。关键是根据布局需求选择合适的单位组合，并测试多设备表现。
以上就是如何用css grid-auto-rows制作响应式行高的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1028229.html
微信扫一扫 
支付宝扫一扫 
