Creating a Dynamic Full-Page Layout with CSS Grid and minmax

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}

.grid-container {
  display: grid;
  grid-template-rows: auto 1fr auto; /* Header, Content (fills remaining), Footer */
  min-height: 100vh; /* Ensure container fills at least viewport height */
}

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

.main-content {
  background-color: #f4f4f4;
  padding: 20px;
  overflow-y: auto; /* Enable scrolling for content if it overflows */
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.main-content h2 {
    margin-top: 0;
}

.main-content p {
    line-height: 1.6;
}

.footer {
  background-color: #666;
  color: white;
  padding: 15px;
  text-align: center;
}

<!-- HTML for context -->
<div class="grid-container">
  <header class="header">
    <h1>My Dynamic Grid Layout</h1>
  </header>
  <main class="main-content">
    <h2>Welcome to the Main Content Area</h2>
    <p>This area is designed to fill the available vertical space. If its content exceeds the viewport height, it will scroll independently. The `1fr` unit in `grid-template-rows` is key here, allowing it to stretch and contract.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Consider resizing your browser window to see how the main content area adjusts its height. The header and footer maintain their content-dependent height.</p>
    <p>For even more control, you could use `grid-template-rows: minmax(min-content, max-content) 1fr minmax(min-content, max-content);` to ensure header/footer don't shrink below their content, but `auto` often suffices.</p>
    <p>More content to ensure scrolling behavior can be observed if the screen is small enough or content is extensive.</p>
    <p>End of main content.</p>
  </main>
  <footer class="footer">
    <p>&copy; 2023 Dynamic Grid Layout. All rights reserved.</p>
  </footer>
</div>