* {
    box-sizing: border-box;
}

.wrapper {
    max-width: 1024px;
    margin: 0 auto;
    font: 1.2em Helvetica, arial, sans-serif;
}

    .wrapper > * {
        /*border: 1px solid #f08c00;
        border-radius: 5px;*/
        background-color: #ffec99;
        padding: 5px;
    }

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-head {
    grid-area: header;
}

.content {
    grid-area: content;
}

.main-nav {
    grid-area: nav;
}

.side {
    grid-area: sidebar;
}

.ad {
    grid-area: ad;
}

.main-footer {
    grid-area: footer;
}

.wrapper {
    display: grid;
    grid-gap: 0px;
    grid-template-areas: "header" "nav" "content" "sidebar" "ad" "footer";
}

@media (min-width: 500px) {
    .wrapper {
        grid-template-columns: 1fr 3fr;
        grid-template-areas: "header  header" "nav     nav" "sidebar content" "ad      footer";
    }

    nav ul {
        display: flex;
        justify-content: space-between;
    }
}

@media (min-width: 700px) {
    .wrapper {
        grid-template-columns: 1fr 4fr 1fr;
        grid-template-areas: "header header  header" "nav    content sidebar" "nav    content ad" "footer footer  footer"
    }

    nav ul {
        flex-direction: column;
    }
}