鬆餅堆疊

與去建構鬆餅不同，這個範例不會在螢幕大小變更時納入子項。這個版面配置通常稱為固定式頁尾，適用於網站和應用程式，跨行動應用程式 (頁尾通常為工具列) 和網站 (尤其是單頁應用程式)。

在元件中新增 display: grid 可讓您使用單一欄的方格，但主要區域會和含有頁尾的內容高度相同。

如要將頁尾固定在底部，請加入：

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

這項操作會設定自動擷取子項大小的頁首和頁尾內容，並將剩餘的空間 (1fr) 套用至主要區域，auto 大小列則會採用子項的最小內容大小，因此，隨著內容變大，列本身也會跟著增加。

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