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
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.
Recommended Links:
