SOURCE

<div class="container">
    <div class="header cir-border">
        HEADER
    </div>
    <div class="menu cir-border">
        MENU
    </div>
    <div class="content cir-border">
        CONTENT
    </div>
    <div class="footer cir-border">
        FOOTER
    </div>
</div>

* {
    padding: 0;
    margin: 0;
}

.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-gap: 05px;
    grid-template-areas: 
    		"h h h h h h h h h h h h" 
    		"c c c c c c c c c c m m" 
    		"f f f f f f f f f f f f";
}

@media screen and (max-width: 640px) {
	.container {
        grid-template-areas:
            "m m h h h h h h h h h h"
            "c c c c c c c c c c c c"
            "f f f f f f f f f f f f";
    }
}

.cir-border{
	border-radius: 10px;
}

.header {
    grid-area: h;
    background: red;
}

.menu {
    grid-area: m;
    background: yellow;
}

.content {
    grid-area: c;
    background: yellowgreen;
}

.footer {
    grid-area: f;
    background: gray;
}