Grid mit Benannten Rasterbereichen - 4

Benannte Rasterbereiche

Hier wird ein CSS-Grid-Layout mit benannten Bereichen definiert, das eine komplette Webseitenstruktur beschreibt.

body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: 
    "head head head head"
    "nav  main main news"
    "nav  main main aside" 
    "foot foot foot foot";
}

grid-template-areas beschreibt das Layout als Schema wie in einem wireframe oder einer ASCII-Zeichung.