This question explores CSS and addresses practical considerations related to: How can I implement a sticky footer using CSS Grid?

To implement a sticky footer using CSS Grid, you can create a grid layout with three rows: a header, main content, and a footer. The footer will always stay at the bottom of the viewport, even if the content is short. Header Main Content Footer body, html { height: 100%; margin: 0; } .container { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; } header, footer { background-color: #f8f9fa; padding: 10px; text-align: center; } main { padding: 10px; } ADDITIONAL COMMENT: The grid-template-rows property defines three rows: auto for the header, 1fr for the main content, and auto for the footer. The 1fr unit allows the main content to expand and fill the available space, pushing the footer to the bottom. Ensure the container has a min-height of 100vh to cover the full viewport height. This approach keeps the footer at the bottom regardless of the content length. ✅

How can I implement a sticky footer using CSS Grid?

Ask any question about CSS here... and get an instant response.

Post this Question & Answer:

How can I implement a sticky footer using CSS Grid?

Asked on Apr 10, 2026

Answer

Previous Question Next Question

To implement a sticky footer using CSS Grid, you can create a grid layout with three rows: a header, main content, and a footer. The footer will always stay at the bottom of the viewport, even if the content is short.

<!-- BEGIN COPY / PASTE -->
    <div class="container">
      <header>Header</header>
      <main>Main Content</main>
      <footer>Footer</footer>
    </div>

    <style>
      body, html {
        height: 100%;
        margin: 0;
      }
      .container {
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-height: 100vh;
      }
      header, footer {
        background-color: #f8f9fa;
        padding: 10px;
        text-align: center;
      }
      main {
        padding: 10px;
      }
    </style>
    <!-- END COPY / PASTE -->

Additional Comment:

The grid-template-rows property defines three rows: auto for the header, 1fr for the main content, and auto for the footer.
The 1fr unit allows the main content to expand and fill the available space, pushing the footer to the bottom.
Ensure the container has a min-height of 100vh to cover the full viewport height.
This approach keeps the footer at the bottom regardless of the content length.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I implement a sticky footer using CSS Grid?

Asked on Apr 10, 2026

Answer

Real Questions. Clear Answers.