팬케이크 더미

해체된 팬케이크와 달리 이 예에서는 화면 크기가 변경될 때 하위 요소를 래핑하지 않습니다. 일반적으로 고정 바닥글이라고 하는 이 레이아웃은 웹사이트 및 앱, 모바일 애플리케이션(일반적으로 툴바임) 및 웹사이트(특히 단일 페이지 애플리케이션)에 사용됩니다.

구성요소에 display: grid를 추가하면 단일 열 그리드가 제공되지만 기본 영역의 높이는 그 아래에 있는 바닥글이 있는 콘텐츠의 높이에 해당할 수 있습니다.

바닥글을 하단에 고정하려면 다음을 추가합니다.

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