layout - 8 (grid)

    <style>
        * {
            margin: 0;
        }

        body {
            background-color: #E1F5FE;
        }

        #wrap {
            width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-areas: 
                "header header"
                "nav nav"
                "aside article1"
                "aside article2"
                "aside article3"
                "footer footer";
            grid-template-columns: 30% 70%;
            grid-template-rows: 100px 100px 260px 260px 260px 100px; 
        }

        #header {
            background-color: #BBDEFB;
            grid-area: header;
        }

        #nav {
            background-color: #90CAF9;
            grid-area: nav;
        }
        #aside {
            background-color: #64B5F6;
            grid-area: aside;
        }

        #article1 {
            background-color: #42A5F5;
            grid-area: article1;
        }

        #article2 {
            background-color: #2196F3;
            grid-area: article2;
        }

        #article3 {
            background-color: #1E88E5;
            grid-area: article3;
        }

        #footer {
            background-color: #0A78DD;
            grid-area: footer;
        }
        @media (max-width: 1300px) {
            #wrap {
                width: 96%;
                grid-template-areas: 
                "header header header"
                "nav nav nav"
                "aside article1 article1"
                "aside article2 article3"
                "aside article2 article3"
                "footer footer footer";
                grid-template-columns: 20% 40% 40%;
                grid-template-rows: 100px 100px 260px 260px 260px 100px; 
            }
        }
        @media (max-width: 768px) {
            #wrap {
                width: 100%;
                grid-template-areas: 
                "header header"
                "nav nav"
                "aside article1 "
                "aside article2"
                "footer footer";
                grid-template-columns: 30% 70%;
                grid-template-rows: 100px 100px 390px 390px 100px; 
            
            }
        }
        @media (max-width: 480px) {
            #wrap {
                grid-template-areas: 
                "header "
                "nav "
                "article1 "
                "article2 "
                "article3"
                "footer";
                grid-template-columns: 100%;
                grid-template-rows: 100px 100px 200px 430px 200px 100px; 
            }
        }
    </style>​

    <div id="wrap">
        <header id="header"></header>
        <nav id="nav"></nav>
        <aside id="aside"></aside>
        <article id="article1"></article>
        <article id="article2"></article>
        <article id="article3"></article>
        <footer id="footer"></footer>
    </div>