layout - 7 (grid)

    <style>
        * {
            margin: 0;
        }
        body {
            background-color: #FFF3E0;
        }
        #wrap {
            width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-areas: 
                "header header header"
                "nav nav nav"
                "aside contents aside2"
 
                "footer footer footer";
                grid-template-columns: 25% 50% 25%;
                grid-template-rows: 100px 100px 780px 100px;
        }
        #header {
            background-color: #CEE5CB;
            grid-area: header;
        }
        #nav {
            background-color: #AFD5AB;
            grid-area: nav;
        }
        #aside {
            background-color: #91C58A;
            grid-area: aside;
        }
        #contents {
            background-color: #7BB973;
            grid-area: contents;
        }
        #aside2 {
            background-color: #67AD5B;
            grid-area: aside2;
        }
        #footer {
            background-color: #5D9E51;
            grid-area: footer;
        }
        @media (max-width: 1300px) {
            #wrap {
                width: 96%;
            }
        }
        @media (max-width: 768px) {
            #wrap {
                width: 100%;
                grid-template-areas: 
                "header header "
                "nav nav "
                "aside contents "
                "aside2 aside2"
                "footer footer ";
                grid-template-columns: 30% 70%;
                grid-template-rows: 100px 100px 630px 150px 100px;
            }
        }
        @media (max-width: 480px) {
            #wrap {
                grid-template-areas: 
                "header "
                "nav "
                "aside "
                "contents"
                "aside2"
                "footer";
                grid-template-columns: 100%;
                grid-template-rows: 100px 100px 200px 430px 150px 100px;
            }
        }
    </style>​

    <div id="wrap">
        <div id="header"></div>
        <div id="nav"></div>
        <div id="aside"></div>
        <div id="contents"></div>
        <div id="aside2"></div>
        <div id="footer"></div>
    </div>