Grid Template CSS - Scrollable Main, sticky Header and Footer

index.css

body {
  display: grid;
  grid-template-areas:
    'header'
    'main'
    'footer';
  grid-template-columns: auto;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header {
  grid-area: header;
  position: sticky;
  top: 0;
}

.main {
  grid-area: main;
  overflow-y: auto;
}

.footer {
  grid-area: footer;
  position: sticky;
  bottom: 0;
}