ыске: решение только для CSS, позволяющее использовать равные по высоте разделы сетки для каждой строки, что также является адаптивным.

Надеемся, что эта диаграмма лучше объясняет требование, чем слова в этом посте:

«Сетка элементов» должна быть отзывчивой - в ней может отображаться различное количество карточек на строку в зависимости от ширины области просмотра. И в пределах данной строки эквивалентные секции должны иметь одинаковую высоту для каждого ряда.

В приведенном ниже HTML и CSS - карточки элементов разбиты на нужные нам строки (в двух примерных точках останова: настольный и мобильный), но высота раздела контента варьируется (хм):

.items {
  max-width: 1200px;
}

.item {
  width: 25%;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  padding: 0 12px;
  margin: 24px -4px 24px 0;
}

@media (max-width: 600px) {
  .item {
    width: 50%;
  }
}

.item__heading {
  background-color: #d4d0f5;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}

.item__content {
  padding: 10px;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
}

.item__price {
  background-color: #e0f6d9;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}

<div class="items">

  <div class="item">
    <div class="item__heading">
      Item 1
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>


  <div class="item">
    <div class="item__heading">
      Item 2
    </div>
    <div class="item__content">
      Some content that is longer than other items on the same row and sets the height of this section
    </div>
    <div class="item__price">
      £69.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 3
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £69.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 4
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £109.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 5
    </div>
    <div class="item__content">
      Some content that is a medium kind of length blah blah
    </div>
    <div class="item__price">
      £29.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 6
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>

    
</div>

Следующий код - это решение на основе JavaScript, которое достигает желаемого результата, но я стараюсь избегать этого:https://codepen.io/rusta/pen/KmbVKd

Ограничения

Количество элементов, отображаемых в списке сетки, может быть любым числом от 1 до 150.Размер отображаемого содержимого элемента будет действительно переменным (поэтому выбор «разумной» минимальной высоты не вариант)

Я надеялся, что новая система CSS Grid поможет мне достичь вышеизложенного, но, поиграв с ней некоторое время, мне нужно немного больше структуры, чем я надеялся, и адаптивный аспект казался довольно сложным. Но, возможно, где-то есть ответ на основе CSS Grid

Дальнейшее примечание: я говорю решение только для CSS, под которым я подразумеваю решение не JS. Если необходимо изменить блоки HTML (порядок / вложение / имена классов) для поддержки не-JS-решения, это совершенно нормально

В этом тривиальном примере - мы фокусируемся только на разделе «контент», чтобы иметь «совпадающие высоты», - поскольку мы можем предположить, что разделы заголовка и цены, естественно, будут иметь одинаковую высоту. Было бы неплохо включить «эквивалентность» в любом соответствующем разделе сетки (заголовок / контент / цена / другое), но это может быть на другой день ...