*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:#333;
padding:20px;
color:white;
}

.container{
display:grid;

grid-template-columns:3fr 1fr;

grid-template-rows:auto auto auto 1fr auto;

grid-template-areas:
"header header"
"nav nav"
"search search"
"main aside"
"footer footer";

gap:10px;
}

header{
grid-area:header;
background:#444;
padding:20px;
}

nav{
grid-area:nav;
background:#555;
padding:20px;
}

.search{
grid-area:search;
background:#666;
padding:20px;
}

main{
grid-area:main;
background:#f0f0f0;
color:#111;
padding:20px;
}

aside{
grid-area:aside;
background:#ddd;
color:#111;
padding:20px;
}

footer{
grid-area:footer;
background:#ccc;
color:#111;
padding:20px;
}