/* gilt für Bildschirme mit Breite kleiner 45em */

.container {
    margin: auto;
    width: 90%;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 5fr; 
    
}

header {
  
    grid-row-start: 1;
    grid-row-end: 2;
    
}

nav {
    grid-row-start: 2;
    grid-row-end: 3;
    
    
}

nav li {
    display:inline-block;
        
}

main {
    grid-row-start: 4;
    grid-row-end: 5;
    
}

aside {
    grid-row-start: 3;
    grid-row-end: 4;
    
}

footer {
    grid-row-start: 5;
    grid-row-end: 6;
    
}


@media (min-width: 45em) {
	/* Breite beträgt mindestens 45em */

.container {
    margin: auto;
    width: 90%;
    display: grid;
    grid-template-rows: 150px 1fr 100px;
    grid-template-columns: 20% 20% 20% 20% 20%; 
    
}

header {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
    
}

nav {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
	
    
}

    nav li {
        display:block;
    }    
    

main {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
    
}

aside {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 3;
    
}

footer {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 3;
    grid-row-end: 4;
    
}

}