Chồng bánh kếp

Không giống như bánh kếp không bị cấu trúc, ví dụ này không gói các thành phần con khi kích thước màn hình thay đổi. Thường được gọi là chân trang cố định, bố cục này được sử dụng cho cả trang web và ứng dụng, trên các ứng dụng dành cho thiết bị di động (chân trang thường là thanh công cụ) và các trang web — cụ thể là một ứng dụng trang đơn.

Việc thêm display: grid vào thành phần sẽ cung cấp cho bạn một lưới cột. Tuy nhiên, khu vực chính sẽ chỉ cao bằng nội dung có chân trang bên dưới.

Để làm chân trang nằm cố định ở dưới cùng, hãy thêm:

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

Thao tác này sẽ đặt nội dung đầu trang và chân trang thành tự động lấy kích thước của các thành phần con và áp dụng không gian còn lại (1fr) cho khu vực chính, trong khi hàng có kích thước auto sẽ lấy kích thước của nội dung tối thiểu của các thành phần con, để nội dung tăng kích thước, hàng tự tăng kích thước để điều chỉnh.

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