How to create pancake stack layout easily using Grid in CSS

Ranjith kumar

1 year ago

Commonly referred to as a sticky footer, this layout is often used for both websites and apps.

Pancake stack using Grid

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

header {
  background-color: #FFEDDB;
  padding: 20px;
}

main {
  padding: 20px;
  background-color: #CCEEFF;
}

footer {
  background-color: #EAFDE7;
  padding: 20px
}

Live Demo

Here’s a live demo showcasing the pancake stack layout

See the Pen Pan cake layout by Ranjith (@Ranjithkumar10) on CodePen.