How to create pancake stack layout easily using Grid in CSS

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

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

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

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