.container {
    display: grid;
    grid-gap: 15px;
    height: 100%;
    grid-template-areas:
        "header"
        "section"
        "aside"
        "footer";
    grid-template-rows: auto auto auto auto;
}
 
.container > * {
    background-color: transparent;
}
 
@media (min-width: 1100px) {
    .container {       
        grid-template-areas:
            "header header header"
            "aside section bside"
            "aside footer bside";
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto auto;
    }
}
 
header {
	display: block;
	margin-left: auto;
	margin-right: auto;
    grid-area: header;
}
 
aside {   
    font-size: 20px;
    grid-area: aside;
}
 
section {
	display: block;
	margin-left: auto;
	margin-right: auto;
    grid-area: section;
}
 
footer {
    font-size: 10px;
    grid-area: footer;
}