積み重なったパンケーキ

分解されたパンケーキとは異なり、この例では、画面サイズが変更されても子はラップされません。一般にスティッキー フッターと呼ばれるこのレイアウトは、ウェブサイトとアプリの両方、モバイルアプリ（フッターは通常ツールバー）、ウェブサイト（特にシングルページ アプリケーション）で使用されます。

コンポーネントに display: grid を追加すると、グリッドは 1 列になりますが、メインエリアの高さは、その下にフッターがあるコンテンツと同じ高さになります。

フッターを下部に固定するには、次のものを追加します。

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

これにより、ヘッダーとフッターのコンテンツは自動的に子のサイズを取得し、メイン領域に残りのスペース（1fr）が適用されます。一方、auto サイズの行は子の最小コンテンツ サイズになるため、コンテンツのサイズが大きくなると、行自体もそれに合わせて拡大します。

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