薄煎饼堆叠

与解构的煎饼不同，此示例不会在屏幕尺寸发生变化时封装其子项。此布局通常称为“粘性页脚”，可用于网站和应用、各种移动应用（页脚通常就是工具栏）和网站（尤其是单页应用）。

向该组件添加 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;
}