Digital Solutions

Responsive Layout

@media queries can be used to check:

width and height of viewport
width and height device
orientation - landscape or portrait
resolution

<!DOCTYPE html>
<html>
    <head>
        <title>css grid</title>
        <link rel="stylesheet" type="text/css" href="responsivelayout.css">
    </head>
    <body>
    <div id="layout">
        <div id="top">header</div>
        <div id="left">left column</div>
        <div id="middle">
            main<br>
            content<br>
            area<br>
        </div>
        <div id="right">right column</div>
        <div id="bottom">Copyright &copy; Symbol</div>
    </div>
    </body>
</html>

responsivelayout.css

#layout{
    display: grid;
    grid-template-areas:
        'top top top top'
        'left middle middle right'
        'bottom bottom bottom bottom';
    width: 80vw; /* 80% of viewport width */
    margin: 0 auto; /* centres the element */
}

/*-----------------------------------------------------------------*/
/* Stack the grid areas if the screen width is smaller than 640px: */
@media screen and (max-width: 640px) {
    #layout{
        display: grid;
        grid-template-areas:
            'top'
            'left'
            'middle'
            'right'
            'bottom';
    }
}
/*-----------------------------------------------------------------*/

#top{
    background-color: thistle;
    grid-area: top;
}

#left{
    background-color: tomato;
    grid-area: left;
    min-width: 25vw;
}

#middle{
    background-color: forestgreen;
    grid-area: middle;
}

#right{
    background-color: bisque;
    grid-area: right;
}

#bottom{
    background-color: deeppink;
    grid-area: bottom;
}

When a query is run a specific style sheet can be delivered to desktops, laptops, tablets or mobiles (hence the term responsive web design). @media types can also alter styles for printing or screen readers.