Sticky Header, Footer with Scrollable Main Content using CSS Grid

html, body {
  height: 100%; /* Ensure html and body take full height */
  margin: 0;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto; /* Header, Main (flexible), Footer */
  /* 'auto' makes header/footer take only necessary height.
     '1fr' makes main content take all remaining space. */
}

header {
  background-color: #333;
  color: white;
  padding: 15px;
  text-align: center;
}

main {
  overflow-y: auto; /* Allows only the main content to scroll */
  padding: 20px;
  background-color: #f9f9f9;
  /* Add more content here to test scrolling */
}

footer {
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}

How it works: This snippet demonstrates how to build a classic web page layout with a sticky header, a sticky footer, and a main content area that scrolls independently, all powered by CSS Grid. By setting `display: grid` and `grid-template-rows: auto 1fr auto` on the `body` element, we define three rows. The `header` and `footer` rows take their content's natural height (`auto`), while the `main` content row takes up all available remaining vertical space (`1fr`). Crucially, `overflow-y: auto` on the `main` element ensures that only the main content area will scroll if its content exceeds its height, keeping the header and footer always visible.