Querido: una solución única de CSS para habilitar "secciones" de cuadrícula de igual altura por fila, que también responde.

Esperemos que este diagrama explique el requisito mejor que las palabras en esta publicación:

La "cuadrícula de elementos" debe responder, ya que puede mostrar un número diferente de tarjetas por fila según el ancho de la ventana gráfica. Y dentro de una fila dada, las secciones equivalentes deben tener la misma altura "por fila".

En el siguiente HTML y CSS: las tarjetas de elementos se dividen en las filas que necesitamos (en los dos puntos de corte de ejemplo, escritorio y dispositivo móvil), pero las alturas de las secciones de contenido son variables (yuck):

.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>

El siguiente codepen es una solución basada en JavaScript que logra el resultado deseado, pero es lo que estoy tratando de evitar:https://codepen.io/rusta/pen/KmbVKd

Limitaciones

El número de elementos que se mostrarán en la lista de cuadrícula puede ser cualquier número de 1-150El tamaño del contenido del elemento que se mostrará será realmente variable (por lo que elegir una altura mínima "sensible" no es una opción)

Esperaba que el nuevo sistema CSS Grid me ayudara a lograr lo anterior, pero después de haber jugado con él durante un tiempo, parece necesitar un poco más de estructura de lo que esperaba, y el aspecto receptivo parecía bastante desafiante. Pero tal vez hay una respuesta basada en la cuadrícula CSS en alguna parte

Nota adicional: digo una solución única de CSS, con lo que me refiero a una solución que no es JS. Si los bloques HTML necesitan cambiar (orden / anidamiento / nombres de clase) para admitir una solución que no sea JS que está absolutamente bien

En este ejemplo trivial, solo nos estamos centrando en la sección de "contenido" para tener "alturas coincidentes", ya que podemos suponer que las secciones de encabezado y precio tendrán naturalmente la misma altura. Sería bueno habilitar la "equivalencia" en cualquier sección de cuadrícula coincidente (encabezado / contenido / precio / otro) pero eso puede ser para otro día ...