Layout benannte Bereiche

Hinweis

Übersichtlicher (einfacher) ist der Bau eines Layouts, wenn die Bereiche benannt werden:
(Achtung: Die "template-areas", "columns" und "rows" müssen deckungsgleich angelegt werden.)

    main.container { 
        display: grid; 
        grid-template-rows: 100px 1fr 50px; 
        grid-template-columns: 25% 25% 25% 25%; 
        grid-template-areas:  
        "header header header header" 
        "content content content sidebar" 
        "footer footer footer footer"; 
    } 
   

Sind die Bereiche erst mal benannt, können die Inhalte leicht zugewiesen werden.

    header { 
        grid-area: header; 
    } 
    article { 
        grid-area: content;
    } 
    aside { 
        grid-area: sidebar; 
    } 
    footer { 
        grid-area: footer;
    }