Altura igual de elementos secundarios de elementos de cuadrícula

Question

Feb 04, 2018, 11:35 PM

Altura igual de elementos secundarios de elementos de cuadrícula

Conla especificación de cuadrícula, Entiendo cómo alinear los elementos secundarios de un contenedor de cuadrícula, pero quiero alinear elementosdentro los niños, como si fueran los elementos de la cuadrícula, en lugar de su contenedor.

Esencialmente, quiero algo que se vea así:

Dentro de cada fila, las celdas tienen alturas iguales con sus celdas vecinas. Sin embargo, cada fila es independiente entre sí. losheaders en la primera fila son 2 líneas de alto, pero elheaders en la segunda fila son 3 líneas de alto.

El contenido dentro de cada elemento es desconocido, y la cantidad de elementos también es desconocida. Por lo tanto, la alineación debe poder aplicarse dinámicamente, en lugar de codificar la altura de cualquier celda específica.

Sin embargo, si lo entiendo correctamente, los elementos dentro del elemento de cuadrícula no son elementos de cuadrícula. ¿Es posible alinearlos como si lo fueran?

display: contents está comenzando a ser compatible con los navegadores, no creocombinándolo congrid-template-areas funcionaría, porque en este caso el número de elementos de la cuadrícula es dinámico.

main {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-gap: 20px 20px;
}

header { background-color: lightblue }
.content { background-color: lightgreen }
footer { background-color: yellow }

<html>
  <body>
    <main>
      
      <article>
        <header>head</header>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a mi diam. Sed pulvinar ex et consectetur venenatis. Duis ligula odio, lobortis a pretium vel, auctor a ante. Nullam nec sem ante. Ut ut interdum metus.  </div>
        <footer>foot</footer>
      </article>
      
      <article>
        <header>head head head head head head head head head head </header>
        <div class="content">Pellentesque sed nisl vel velit porta mattis. Sed luctus euismod mi, in viverra mi lacinia in. Donec euismod magna metus, vel lacinia sem dignissim non.</div>
        <footer>foot</footer>
      </article>
      
      <article>
        <header>head</header>
        <div class="content">Nulla pretium id enim quis rutrum. Donec lacinia mauris vel risus volutpat facilisis.</div>
        <footer>foot</footer>
      </article>
      
      <article>
        <header>head</header>
        <div class="content">Pellentesque ut scelerisque nisl, ut cursus velit.  </div>
        <footer>foot</footer>
      </article>
      
      <article>
        <header>head</header>
        <div class="content">lorum ipsum.</div>
        <footer>foot</footer>
      </article>
      
      <article>
        <header>headhead head head head head head head head head head head head head head head </header>
        <div class="content">Donec porttitor massa purus. Pellentesque hendrerit placerat risus vitae hendrerit. Fusce vitae elit dictum, pharetra lacus sodales, volutpat enim.</div>
        <footer>foot</footer>
      </article>
      
    </main>
  </body>
</html>