CSS grid project #1, responsive 2 column layout



Introduction

This CSS grid project will build a responsive two-column website layout with a header, footer, sidebar, and main content area. This is a mobile-first design. Therefore, It uses one media query to change the layout to two columns on larger screens. Most importantly, not too much attention has been paid to the look of the layout to avoid complicating the CSS. Later projects will show how to improve the design aspects.

Js Fiddle demo

A js fiddle demo is below, you will need to resize the browser widow to see the responsive behaviour.

The HTML

There is a wrapper div that has the grid applied to it. Inside this there is a header,sidebar, content area and footer.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=lorem 30l, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
 <div id="wrapper">
     <header>
         <h1>Header</h1>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem doloribus corporis veritatis      quo aliquid quod eaque deleniti omnis, soluta accusamus repellendus tempora consequatur facilis beatae inventore. Enim sit adipisci assumenda.
     </header>
     <aside>
         <h2>Sidebar</h2>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores labore consequatur nobis commodi quidem odio, quos temporibus vel, neque exercitationem eligendi doloremque. Quo voluptatibus eligendi odio quam officia, ut cum?
     </aside>
     <section>
         <h2>Main content</h2>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem doloribus corporis veritatis      quo aliquid quod eaque deleniti omnis, soluta accusamus repellendus tempora consequatur facilis beatae inventore. Enim sit adipisci assumenda.
     </section>
    <footer>
        <h2>Footer</h2>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores labore consequatur nobis commodi quidem odio, quos temporibus vel, neque exercitationem eligendi doloremque. Quo voluptatibus eligendi odio quam officia, ut cum?
    </footer>
 </div> 
</body>
</html>

The CSS

This project uses CSS colour names, there are 140 named colours in CSS. Colour names are great for prototyping as you know instantly what the colour is. Try working out the colour of a hex value!

The grid here, uses implicit rows in that they are not specified in the grid but managed by the browser. The wrapper div just has the background and text colour set. Next is the select-all children selector for the wrapper, this adds some padding to all the divs in the wrapper. The next block of CSS adds a different background colour to each element so that they can be distinguished.

Finally a media query is used so that the grid template columns are only active for larger screens. These are set to 1fr, 2fr to create a sidebar that is 1/3 of the screen wide. The magic happens with the grid column settings on each element. The line numbers specify the span, for example the header goes from line 1 to line 3, which, with three columns, is the full screen width.

 /* mobile */
 #wrapper{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color:floralwhite;
    Margin: 4rem;
    background-color: lightgrey;
    padding: 1em;
    display: grid;
}
/* selects all children elements in wrapper */
#wrapper >*{
   padding: 1em;
  }
header{
    background-color: coral;
}
aside{
    background-color: darkgoldenrod;
}
section{
    background-color: darkorchid;
}
footer{
    background-color: deepskyblue;;
}

/* desktop  applies when width is greater than 600px */
@media only screen and (min-width: 600px) {
    #wrapper{
        grid-template-columns: 1fr 2fr;
    }
    header{
       grid-column: 1 / 3;  
    }
    aside{
        grid-column: 1 / 2;
    }
    section{
        grid-column: 2 / 3;
    }
    footer{
        grid-column: 1 / 3;
    }
  }

That ends this project.