Stylesheet für grid1.css

Das hier gilt für alle Bildschirmgrößen.

.container {
display:grid;
grid-template-columns: repeat(1, 1fr);
grid-template-areas:
"header"
"nav"
"aside"
"main"
"footer";
grid-gap: 5px;
}

Ab hier gelten die Einstellungen für Bildschirme die größer als 45em sind.

.container {
display:grid;
grid-template-columns:(3, 1fr);
grid-template-areas:
"header header header"
"nav nav nav"
"main main aside"
"footer footer footer" ;
}

nav { grid-area: nav;
}

header {
grid-area: header;
}

main {grid-area: main;
}

aside {grid-area: aside;
}

footer {grid-area: footer;
}