<div class = "wrapper">
         <div class = "header">header</div>
         <div class = "nav">nav</div>
         <div class = "aside">Aside</div>

         <div class = "section">
                <div id = "one">Section One</div>
                <div id = "one">Section Two</div>
                <div id = "one">Section Three</div>
                <div id = "one">Section Four</div> 
         </div><!--end of div section-->

         <div class = "footer">footer</div>
    </div>

.wrapper{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto); 
    grid-gap: 10px;
    grid-template-areas: "header header header"
                         "aside nav nav"
                         "section section section"
                         "footer footer footer";

}

.nav{
    grid-area: nav;
    background-color: green;
}

.header {
    grid-area: header;
    background-color: rgb(216, 104, 104);
}

.aside {
    grid-area: aside;
    background-color: orange;
}

.section {
    grid-area: section;
    background-color: rgba(48, 30, 44);
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3px;
}

.footer {
    grid-area: footer;
    background-color: pink;
}

#one {
    background: rgb(128, 81, 134);
    border: 2px ridge rgb(223, 152, 152);

}