Media Queries
body {
display: grid;
gap: 0.5em;
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas:
"head head head"
". main nav"
". main news"
"foot foot foot";
}
Im Mobile first! werde alle Elemente untereinander dargestellt – allerdings wird die Navigation nach unten geschoben, damit der Hauptinhalt sicher im Viewport ist.
Sobald der Viewport breit genug ist, wird das 3-Spalten-Layout; später sogar ein 4-Spalten-Layout dargestellt.