ыске: решение только для CSS, позволяющее использовать «НЕСКОЛЬКО» одинаковых по высоте высот «сечений» для каждой строки, что также является адаптивным.

Примечание: это дополнительный вопрос кэтот вопрос который имеет только одну секцию "равной высоты" на элемент - что может быть достигнуто с помощью flexbox

Приведенная ниже диаграмма должна помочь объяснить требование:

«Сетка элементов» должна быть отзывчивой - в ней может отображаться разное количество карточек на строку в зависимости от ширины области просмотра (4 на рабочем столе, 2 на мобильном). Внутри данной строки эквивалентные разделы «content» и «feature» должны иметь одинаковую высоту.

В приведенном ниже 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__features {
  padding: 10px;
  border-top: 1px solid #bbbbbb;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
  background-color: #f7cbb1;
}

.item__features ul {
  margin: 0px;
}

.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__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </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 as it spans many more lines than the rest of the other content sections on this row
    </div>
    <div class="item__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </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__features">
      <ul>
        <li>feature 1</li>                         <li>feature 2</li>
        <li>feature 3</li>
      </ul>
    </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__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </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__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </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__features">
      <ul>
        <li>feature 1</li>
        <li>feature 2</li>
      </ul>
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>

    
</div>

Я создал следующий codepen как решение на основе JavaScript, которое достигает желаемого результата - но я надеюсь заменить его просто решением CSS, если это возможно:http://codepen.io/rusta/pen/xdmdxm

Ограничения

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

Решения на основе Flexbox, кажется, не в состоянии справиться с тем фактом, что элементы имеют более одного раздела, который необходимо выровнять

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

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