Css grid with footer fixed at the bottom

Css grid with footer fixed at the bottom

10 minutes 15s
A 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.

<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: 100%;
        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;
        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>