css - 网格模板区域中的 CSS 网格自动

Question

我有以下CSS：

.card {
    display: grid;
    grid-template-columns: 1fr 40px;
    grid-template-rows: fit-content(10px) fit-content(10px) auto;
    grid-template-areas:
      "image image"
      "description slider"
      "details slider";
  }

.image-block {
    grid-area: image;
}

.description-block {
    grid-area: description;
}

.details-block {
    grid-area: details;
}

.slider-block {
   grid-area: slider;
   min-height: 300px;
}

我想要实现的是，我的描述块只占用与里面的内容一样多的空间，然后细节块占据其余部分。这是因为描述块的内容通常小于 150 像素，所以我希望细节块从描述块的正下方开始，这样看起来更好。

但是会发生的是，这两个块总是获得相同数量的空间。所以如果描述块的内容恰好只占用了 50 个像素，那么在细节块开始之前它还有 100 个像素的空白空间。

有没有办法避免这种情况？

标签： csscss-grid