Stos naleśników

W przeciwieństwie do zdekonstruowanego naleśnika ten przykład nie opakowuje elementów podrzędnych po zmianie rozmiaru ekranu. Układ ten jest powszechnie nazywany przyklejoną stopką. Jest używany zarówno w witrynach, jak i w aplikacjach, w aplikacjach mobilnych (stopka jest zwykle paskiem narzędzi) i w witrynach, w szczególności aplikacji jednostronicowych.

Dodanie elementu display: grid do komponentu spowoduje utworzenie siatki z jedną kolumną, jednak obszar główny będzie sięgać tylko wysokości zawartości, pod którą znajduje się stopka.

Aby stopka przylegała do dołu, dodaj:

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

Spowoduje to ustawienie zawartości nagłówka i stopki w taki sposób, aby automatycznie przystosowywały się do rozmiaru elementów podrzędnych, a pozostałe miejsce (1fr) zostało zastosowane do obszaru głównego. Wiersz o rozmiarze auto przyjmie rozmiar minimalnej zawartości jego elementów podrzędnych, dlatego w miarę powiększania się zawartości wiersz będzie się powiększał i odpowiednio się dostosowywał.

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