Tumpukan panekuk

Tidak seperti pancake yang didekonstruksi, contoh ini tidak menggabungkan turunannya saat ukuran layar berubah. Umumnya disebut sebagai footer melekat, tata letak ini digunakan untuk situs dan aplikasi, di seluruh aplikasi seluler (footer biasanya berupa toolbar), dan situs—khususnya aplikasi web satu halaman.

Menambahkan display: grid ke komponen akan memberi Anda petak kolom tunggal, tetapi area utama hanya akan setinggi konten dengan footer di bawahnya.

Agar {i>footer<i} menempel di bagian bawah, tambahkan:

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

Tindakan ini akan menyetel konten header dan footer agar otomatis mengikuti ukuran turunannya, dan menerapkan ruang yang tersisa (1fr) ke area utama, sedangkan baris berukuran auto akan menggunakan ukuran konten minimum turunannya, sehingga ukuran konten tersebut bertambah, baris itu sendiri akan bertambah menyesuaikan.

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