Filhos de altura igual dos itens da grade

Question

Feb 04, 2018, 11:35 PM

Filhos de altura igual dos itens da grade

Coma especificação da grade, Eu entendo como alinhar os filhos de um contêiner de grade, mas quero alinhar elementosdentro as crianças, como se fossem os itens da grade, e não o recipiente.

Essencialmente, eu quero algo parecido com isto:

Dentro de cada linha, as células têm alturas iguais às células vizinhas. Cada linha é independente uma da outra, no entanto. oheaders na primeira linha têm 2 linhas de altura, mas oheaders na 2ª linha têm 3 linhas de altura.

O conteúdo em cada elemento é desconhecido e o número de itens também é desconhecido. Portanto, o alinhamento deve ser aplicado dinamicamente, em vez de codificar a altura de qualquer célula específica.

Se bem entendi, os elementos no item de grade não são itens de grade em si. É possível alinhá-los como se fossem?

display: contents está começando a ser suportado por navegadores, eu não achocombinando comgrid-template-areas funcionaria, porque nesse caso o número de itens da grade é 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>