CSS Grid布局行最大高度无响应式，窗口缩放时行高无法自适应

问题根源 #

你使用grid-auto-rows: minmax(auto, 500px)无法实现行高自适应缩小的核心原因有两个：

1. minmax()中auto作为最小值时，会优先满足内容的最小内在高度，不会允许行高小于内容的固有高度
2. 图片设置了height: 100%会强制匹配当前行高，反向把行高锁死在你设置的最大值500px，形成无法缩小的死锁

解决方案 #

只需修改两处CSS即可实现需求：

1. 将grid-auto-rows的最小值从auto改为0，允许行高自适应缩小
2. 将图片的height: 100%改为max-height: 100%加height: auto，保证图片保持宽高比响应式缩放

修改后的完整CSS如下：

.grid {
  max-width: 700px;
  margin: auto;
  
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(0, 500px);
  column-gap: 20px;
  row-gap: 20px;
}
img {
  width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: cover;
}
.box-2 {
  grid-area: auto / auto / span 2 / span 1;
}
.box-3 {
  grid-area: auto / auto / span 2 / span 1;
}
.box-5 {
  grid-area: auto / auto / span 2 / span 2;
}

效果说明 #

• 大尺寸窗口下，网格行高最大为500px，图片填满网格容器
• 窗口缩小过程中，网格列宽会等比例缩小，图片会保持宽高比跟随列宽缩小，网格行高也会对应同步缩小，完全符合需求

内容的提问来源于stack exchange，提问作者hubvill