Pilha de panquecas

Ao contrário da panqueca desconstruída, este exemplo não envolve os filhos quando o tamanho da tela muda. Normalmente conhecido como rodapé fixo, esse layout é usado em sites e apps, em apps para dispositivos móveis (o rodapé geralmente é uma barra de ferramentas) e em sites específicos, em especial nos aplicativos de página única.

Adicionar display: grid ao componente vai proporcionar uma grade de coluna única. No entanto, a área principal terá a mesma altura do conteúdo com o rodapé abaixo.

Para fixar o rodapé na parte inferior, adicione:

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Isso configura o conteúdo do cabeçalho e rodapé para assumir automaticamente o tamanho dos filhos e aplica o espaço restante (1fr) à área principal, enquanto a linha com tamanho auto assumirá o tamanho do conteúdo mínimo dos filhos, de modo que, à medida que o conteúdo aumentar, a própria linha aumentará para se ajustar.

HTML

<div class="parent">
  <header class="section yellow">Header</header>
  <main class="section blue">Main</main>
  <footer class="section green">Footer Content</footer>
</div>

CSS

        .parent {
  display: grid;
  grid-template-rows: auto 1fr auto;

  /* Just for parent demo size */
  height: 100vh;
}