body{
    margin: auto;
}
.container {
    display: grid;
    grid-template-rows: repeat(4, auto);
    grid-template-areas:
        "header header  header  header"
        "menu   menu    menu    menu"
        "aside  body    body    body"
        "footer footer  footer  footer";
    gap: .1rem;
}

.container div{
    background-color: rgb(155, 155, 155);
}

.header {
    grid-area: header;
    min-height: 65px;
}

.menu {
    grid-area: menu;
    min-height: 40px;
}

.body {
    grid-area: body;
    min-height: 93vh;
}

.aside {
    grid-area: aside;
}

.footer {
    grid-area: footer;
}

ul{
    padding-inline-start: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 2fr));
    gap: 1rem;
    justify-items: center;
    align-items: center;
}

ul li{
    background-color: aquamarine;
    height: 250px;
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-image: url("https://picsum.photos/150/250")
}

@media screen and (max-width: 680px){
    .container {
        grid-template-areas:
            "header header  header  header"
            "menu   menu    menu    menu"
            "body  body    body    body"
            "footer footer  footer  footer";
    }
    .aside {
        display: none;
    }
}