.grid-container {
display:grid;
grid-template-areas: 
'header header header aside'
'section article article aside'
'footer footer footer footer';
grid-column: auto;
width: 800px;
}

header {
    grid-area: header;
    background-color: red;
    height: 100px;

}
aside {
    grid-area: aside;
    background-color: yellow;
    padding: 20px;
}
 div {
    grid-area: div;
    background-color: ghostwhite;

}
aside div {
margin-bottom: 10px;
width: 100px;
}
section {
    grid-area: section;
    background-color: green;
    width: 200px;
}
nav {
    grid-area: nav;
    background-color: white;
   border: 2px solid black;
   width: 150px;
   margin-left: 20px;
   margin-top: 20px;

    
}
article {
    grid-area: article;
    background-color: white;
    width: 450px;
    height: 450px;

}

footer {
    grid-area: footer;
    background-color: gray;
    height: 100px;
}
/* Mobile-first: aside (gul) gömd */
aside {
  display: none;
}

/* Mellanläge: fortfarande gömd (2 kolumner: meny + innehåll) */
@media (min-width: 700px) {
  aside {
    display: none;
  }
}

/* Stort läge: visa aside igen (3 kolumner: meny + innehåll + aside) */
@media (min-width: 1000px) {
  aside {
    display: block;
  }
}