Css grid with footer fixed at the bottom
Css grid with footer fixed at the bottom
10 minutes 15sA simple demonstration of a css grid layout with a fixed footer at the bottom. The footer remains at the bottom, independently of the page contents size.
Example layout using css grid: min-content and 1fr
Using min-content in grid-template-rows the content section takes the minimum space. This places the footer right after it.
By using 1fr for the content section in grid-template-rows, we make the section take the rest of space. This pushes the footer to the bottom of the layout, as we wanted.
1 column version
<html>
<body>
<header>My website</header>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tellus fermentum, suscipit nunc at,
ullamcorper orci. Morbi tincidunt urna eget odio auctor, a accumsan nisi varius. Quisque eleifend nunc vel ipsum
sodales gravida. Vivamus interdum ultricies nibh. Suspendisse sagittis facilisis lorem at feugiat. Proin vulputate
pulvinar metus, sed faucibus urna accumsan ut. Suspendisse euismod velit leo, et porttitor elit volutpat nec. Etiam
id ultrices felis, a dictum dolor. Suspendisse tristique aliquet lectus nec ultrices. Morbi justo justo, luctus id
varius tempus, fringilla sed nibh. Ut faucibus luctus iaculis.
</div>
<footer>My footer</footer>
</body>
<style type="text/css">
body {
height: 100vh;
display: grid;
/*@formatter:off*/
grid-template-areas:
'header header'
'content content'
'footer footer';
/*@formatter:on*/
/* footer right after content ends */
/* grid-template-rows: min-content min-content min-content;*/
/* content takes any extra space (1fr) */
grid-template-rows: min-content 1fr min-content;
grid-template-columns: 1fr;
margin: 0;
}
header {
grid-area: header;
padding: 20px;
background-color: #dddddd;
}
.content {
grid-area: content;
padding: 20px;
}
footer {
grid-area: footer;
padding: 20px;
background-color: #dddddd;
}
</style>
</html>
Play with it
See the Pen Css grid with footer fixed at the bottom by Mejutoco (@mejutoco) on CodePen.
2 column version
We can use the same principle for multi column layouts. Here we can see an example with added columns for sidebar and login sections.
<html>
<body>
<header>My website</header>
<div class="login">Login</div>
<div class="sidebar">Sidebar</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tellus fermentum, suscipit nunc at,
ullamcorper orci. Morbi tincidunt urna eget odio auctor, a accumsan nisi varius. Quisque eleifend nunc vel ipsum
sodales gravida. Vivamus interdum ultricies nibh. Suspendisse sagittis facilisis lorem at feugiat. Proin vulputate
pulvinar metus, sed faucibus urna accumsan ut. Suspendisse euismod velit leo, et porttitor elit volutpat nec. Etiam
id ultrices felis, a dictum dolor. Suspendisse tristique aliquet lectus nec ultrices. Morbi justo justo, luctus id
varius tempus, fringilla sed nibh. Ut faucibus luctus iaculis.
</div>
<footer>My footer</footer>
</body>
<style type="text/css">
body {
height: 100vh;
display: grid;
/*@formatter:off*/
grid-template-areas:
'header login'
'sidebar content'
'footer footer';
/*@formatter:on*/
/* footer right after content ends */
/* grid-template-rows: min-content min-content min-content;*/
/* content takes any extra space (1fr) */
grid-template-rows: min-content 1fr min-content;
grid-template-columns: 1fr 1fr;
margin: 0;
}
header {
grid-area: header;
padding: 20px;
background-color: #dddddd;
}
.login {
grid-area: login;
padding: 20px;
}
.sidebar {
grid-area: sidebar;
padding: 20px;
}
.content {
grid-area: content;
padding: 20px;
}
footer {
grid-area: footer;
padding: 20px;
background-color: #dddddd;
}
</style>
</html>
Play with it
See the Pen Css grid with footer fixed at the bottom 2 columns by Mejutoco (@mejutoco) on CodePen.