Krep yığını

Parçadan farklı olarak bu örnek, ekran boyutu değiştiğinde alt öğelerini sarmaz. Genellikle yapışkan altbilgi olarak adlandırılan bu düzen, hem web siteleri hem de uygulamalar için mobil uygulamalarda (altbilgi genellikle bir araç çubuğudur) ve web sitelerinde, özellikle de tek sayfalık uygulamalarda kullanılır.

Bileşene display: grid eklediğinizde tek sütunlu bir ızgara elde edersiniz ancak ana alan yalnızca altında altbilgi bulunan içeriğin boyu kadar olur.

Altbilginin en alta yapıştırılması için şunu ekleyin:

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

Bu işlem, üstbilgi ve altbilgi içeriğini otomatik olarak alt öğelerinin boyutunu alacak şekilde ayarlar ve kalan alanı (1fr) ana alana uygular. auto boyutundaki satır ise alt öğelerinin minimum içeriğinin boyutunu alır. Bu nedenle, içerik boyutu büyüdükçe satırın kendisi düzenlenecek şekilde büyür.

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

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

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