Pila di pancake

A differenza del pancake scomposto, in questo esempio non vengono avvolti i bambini quando le dimensioni dello schermo cambiano. Chiamato comunemente piè di pagina persistente, questo layout è utilizzato sia per i siti web che per le app, in tutte le applicazioni per dispositivi mobili (il piè di pagina è comunemente una barra degli strumenti) e per i siti web, in particolare applicazioni a pagina singola.

L'aggiunta di display: grid al componente crea una griglia a colonne singole, ma l'area principale sarà alta quanto i contenuti, con il piè di pagina sottostante.

Per fare in modo che il piè di pagina rimanga in basso, aggiungi:

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

In questo modo i contenuti di intestazione e piè di pagina vengono impostati in modo da utilizzare automaticamente le dimensioni degli elementi secondari e viene applicato lo spazio rimanente (1fr) all'area principale, mentre la riga auto assume le dimensioni del contenuto minimo degli elementi secondari. In questo modo, con l'aumento delle dimensioni dei contenuti, la riga stessa cresce per adattarsi.

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;
}