Grid布局末行grid-row跨行布局适配问题求助

问题背景 #

原有响应式Grid布局（使用repeat(auto-fit, minmax(250px, 1fr))）在全分辨率下表现正常，但给部分区块添加.x2类（设置grid-row: span 2实现跨行）后，部分分辨率下出现布局异常：跨行元素会强制拉高同行其他单元格的高度，无法实现卡片高度随内容自适应的需求。

无JS解决方案 #

通过调整Grid容器的行高规则和卡片的高度设置，即可解决该问题：

修改后的完整CSS代码 #

#wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: minmax(min-content, auto); /* 关键新增：让行高自适应内容 */
  gap: 16px;
  padding: 8px 16px 16px;
  margin-bottom: 64px;
}

.block {
  display: flex;
  min-height: 100px; /* 保留最小高度，避免空内容时布局塌陷 */
}
    
.card {
  background: #fff;
  box-shadow: none;
  box-sizing: border-box;
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  border-color: #03a9f4;
  color: black;
  display: block;
  transition: all 0.3s ease-out 0s;
  position: relative;
  height: auto; /* 改为auto，让卡片高度由内容撑开 */
  width: 100%;
}

.x2 {
  grid-row: span 2;
}

方案原理 #

1. Grid行高自适应：grid-auto-rows: minmax(min-content, auto) 让Grid的每一行高度基于该行内容自动调整，既保证能容纳最小内容需求，又不会被跨行元素强制拉伸统一高度，跨行元素仅占用两行的自适应空间。
2. 卡片高度随内容变化：将.card的height: 100%改为height: auto，取消父元素高度的强制继承，确保卡片高度完全由内部内容决定，彻底避免不必要的高度拉伸和滚动条。

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