


body {
    margin: 0;
    padding: 0;
}

section {
    display: grid;
    height: 100vh;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas: 
        "header header other"
        "nav nav nav"
        "content content content"
        "footer footer footer"
    ;
}

div {
    font-size: 40px;
    font-weight: bold;
    box-shadow: inset 0 0 2px black;
}

.area_1 {
   grid-area: header;
   background-color: red; 
}

.area_2 {
    grid-area: content;
    background-color: yellow; 
 }

.area_3 {
    grid-area: footer;
    background-color: green; 
}