html, body {margin:0; padding:0;}
* {padding: 5px 10px;}

#fulltop {grid-area: fulltop;}
#fullbottom {grid-area: fullbottom;}
#a-left {grid-area: left;}
#a-right {grid-area: right;}


body { 
    grid-gap: 5px;
    height:100vh; 
    display: grid; 
    grid-template-rows: 80px 100px 50px 1fr 50px 50px 100px; 
    grid-template-columns: 1fr; 
    grid-template-areas:  
        "header"
        "fulltop"
        "left" 
        "article" 
        "right" 
        "fullbottom" 
        "footer" 
        ;
} 

/* Start/End  für alle */
header, #fulltop, article, #a-left, #a-right, #fullbottom, footer {
    grid-column: 1 / 5;  
}

header { 
    background:tomato; 
    grid-row-start:1;     /* oder statt beider rows: grid-row: 1 / 2 */
    grid-row-end:2; 
}
#fulltop {
    background:grey; 
    grid-row: 2 / 3;   
}
aside#a-left { 
    background:lightgreen; 
    grid-row: 3 / 4;  
} 
article { 
    background:gold; 
    grid-row: 4 / 5;  
} 
aside#a-right { 
  background:lightgreen; 
    grid-row: 5 / 6;  
}
#fullbottom {
    background:grey; 
    grid-row: 6 / 7;   
} 
footer { 
    background:lightblue; 
    grid-row: 7 / 8;  
}









/* ### MEDIA QUERYS ################################# */

@media screen and (min-width: 500px) { 
    body { 
        height:100vh; 
        display: grid; 
        grid-template-rows: 40px 100px 1fr 50px 100px; 
        grid-template-columns: 250px 1fr 150px; /*  3 Spalten */
        grid-template-areas:  
        "header header header"
        "fulltop fulltop fulltop"
        "left article right" 
        "fullbottom fullbottom fullbottom" 
        "footer footer footer" 
        ;
        
    } 
    
    header { 
        grid-column: 1 / 4;  /* von Linie 1 (ganz links) bis Linie 4 (ganz rechts) = 3 Spalten */
           grid-row: 1 / 2; 
    }
    
    #fulltop {
        grid-column: 1 / 4; 
           grid-row: 2 / 3;
    }
    
    aside#a-left {  
        grid-column: 1 / 2; 
           grid-row: 3 / 4; 
    } 
    
    article { 
        grid-column: 2 / 3;  
           grid-row: 3 / 4; 
    } 
    
    aside#a-right {  
        grid-column: 3 / 4; 
           grid-row: 3 / 4;  
    }
    
    #fullbottom {
        grid-column: 1 / 4; 
           grid-row: 4 / 5;   
    } 
    footer { 
        grid-column: 1 / 4; 
           grid-row: 5 / 6;  
    }
}