Programster's Blog

Tutorials focusing on Linux, programming, and open-source

CSS Grid - Restructuring For Different Page Sizes

CSS CSS-grid

The video below demonstrates how CSS grid layouts can be used in combination with media queries to restructure your site to best make use of different screen sizes.

Source Code

HTML


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <div class="page-grid">

            <div class="navbar">
                <a href="/about">About</a>
                <a href="/store">Store</a>
                <a href="/support">Support</a>
            </div>



            <div class="content">
                <p> Lorem ipsum dolor sit amet, accumsan aenean, cras a sem, sit ligula pellentesque, cumque sodales, lectus dictum pharetra. Enim in neque maecenas, fusce diam etiam ipsum enim et integer. Ullamcorper duis. Nam duis quis sunt dui fermentum, sit magna volutpat integer vel ut tortor. Nibh mus et, scelerisque congue quam dignissim eu leo. Vivamus maecenas dictum sit mauris, dolor dictum urna lorem sit, consectetuer libero neque, in sapien porttitor quis vel sem. Turpis justo metus dignissim integer, ut ornare enim eget ultrices iaculis.</p>

                <p>Accumsan purus hendrerit quis non, tempor morbi sem morbi auctor gravida, venenatis vestibulum velit ut, wisi leo eget malesuada dui, suscipit sit non est. Mauris adipiscing aptent porttitor sit, ea dis vel est, tincidunt duis. A dolor ut in tristique, pretium nascetur accumsan dui nec fusce nunc, proin donec nascetur et. Velit molestie erat nisl ridiculus, volutpat dictum wisi, aut neque, at curabitur sed vel gravida sed. Risus amet commodo, justo nisl, eu tristique sem hendrerit turpis amet. Dictum risus nulla, fusce tempor enim, est mattis sollicitudin voluptatem ut in, non vestibulum vivamus velit integer. Fusce nec ante auctor at quis, vitae quam enim magna vitae quis, ut a mattis dolor velit, vel vitae potenti amet.</p>

                <p>Nunc quisque curabitur volutpat gravida tincidunt cursus, vestibulum sit integer nisl est diam adipiscing. Sit mauris ac vivamus diam quisque. Donec felis nulla fermentum. Lorem sed integer lacinia sed etiam ut, volutpat massa rhoncus ullamcorper, urna id accumsan elit wisi malesuada eget, vel nulla dapibus dolor ligula rhoncus, non aliquam felis aliquam malesuada hendrerit. Commodo vitae pellentesque et donec sit suspendisse. Sodales sagittis orci pede.</p>

            </div>

            <div class="footer">This is my footer.</div>


        </div>
    </body>
</html>

CSS

body {
    margin: 0px;
    padding: 0px;
}


.navbar {
    grid-area: navbar;
    background-color: red;
    width:100%;
    text-align: center;
}

.content {
    grid-area: content;
    background-color: grey;
    width:100%;
}

.footer {
    grid-area: footer;
    background-color: yellow;
    text-align: center;
}

/* Mobile layout defined at top outside and above media queries */
.page-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "navbar"
                         "content"
                         "footer";
}

/* 
 * At a certain point, add margins left and right
 * to create a centered page effect 
 */
@media screen and (min-width:1000px)
{
    .page-grid {
        display: grid;
        grid-template-columns: 1fr 1000px 1fr;
        grid-template-areas: ". navbar ."
                             ". content ."
                             ". footer .";
    }
}

/* Move the navbar to the side when screen is very wide (desktop) */
@media screen and (min-width:1150px)
{
    .page-grid {
        display: grid;
        grid-template-columns: 1fr 150px 1000px 1fr;
        grid-template-areas: ". navbar content ."
                             ". footer footer .";
    }

    /* The navbar links now need to go vertically on top of each other */
    .navbar a {
        display: block;
    }
}

Last updated: 2nd February 2022
First published: 16th August 2018