* {
    box-sizing: border-box;
}

body {
    margin: 20px;
}

.box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 15px;
    font-size: 135%;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

* {
    box-sizing: border-box;
}

body {
    margin: 20px;
}

.box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 15px;
    font-size: 135%;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 2fr 100px 100px;
    grid-template-areas:
        "header header header header"
        "aside main main main"
        "section section section section"
        "footer footer footer footer"
    ;
    gap: 5px;
}

header {
    grid-column: 2/4;
    grid-area: header;
}

main {
    grid-area: main;
}

aside {
    grid-area: aside;
}

section{
    grid-area: section;
}

footer {
    grid-area:  footer;
}