Media Queries
body {
display: grid;
gap: 0.5em;
grid-template-areas:
"head"
"main"
"nav"
"news"
"aside"
"foot";
}
@media (min-width: 35em) {
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"head head head "
"nav news aside"
"main main main"
"foot foot foot";
}
@media (min-width: 45em) {
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";
}
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.