Блог

У меня есть следующий 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 пикселей пустого пространства.

есть ли способ избежать этого?