CSS Grid布局grid-template-areas下详情块上方多余留白如何解决？

右侧.slider-block跨了description、details对应的两个网格行，且设置了min-height: 300px，要求这两行总高度至少为300px。你原配置中这两行都用了fit-content(10px)，当两行内容总高度不足300px时，Grid会默认把剩余高度平分给这两行，就导致了description下方出现多余空白。

调整.card的grid-template-rows配置即可，把description对应的第二行设置为自适应内容高度的min-content，把details对应的第三行设置为1fr占用剩余空间：

.card {
    display: grid;
    grid-template-columns: 1fr 40px;
    /* 仅修改这一行配置即可 */
    grid-template-rows: fit-content(10px) min-content 1fr;
    grid-template-areas:
      "image image"
      "description slider"
      "details slider";
  }

修改后第二行只会占用description内容实际需要的高度，剩余所有高度都会分配给第三行的details块，符合预期布局。
如果你的image内容高度会超过10px，可以把第一行的fit-content(10px)调整为更大的阈值或者替换为min-content，避免image内容被截断。

你也可以把description和details放在同一个网格单元格内用Flex布局实现，兼容性更好：

1. 调整CSS配置：

.card {
    display: grid;
    grid-template-columns: 1fr 40px;
    grid-template-rows: fit-content(10px) 1fr;
    grid-template-areas:
      "image image"
      "content slider";
  }
/* 新增content块的样式 */
.content-block {
  grid-area: content;
  display: flex;
  flex-direction: column;
}
.details-block {
  flex-grow: 1;
}
.slider-block {
   grid-area: slider;
   min-height: 300px;
}

2. HTML结构对应调整，把.description-block和.details-block放在父级.content-block内即可。

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