Willkommen zum Info Kurs
<

Stylesheet für grid2

/* gilt für alle */

header,
nav,
main,
aside,
footer {
border-radius: 0.5em 0.5em 0.5em;
border: thin solid;
padding: 10px;
margin: 5px;

}


* gilt für Bildschirme mit Breite kleiner 45em */

.container {
margin: auto;
width: 90%;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 5fr;

}
header {

grid-row-start: 1;
grid-row-end: 2;

}

nav {
grid-row-start: 2;
grid-row-end: 3;


}

nav li {
display:inline-block;

}

main {
grid-row-start: 4;
grid-row-end: 5;

}

aside {
grid-row-start: 3;
grid-row-end: 4;

}

footer {
grid-row-start: 5;
grid-row-end: 6;

}


@media (min-width: 45em) /* Breite beträgt mindestens 45em */
{

.container {
margin: auto;
width: 90%;
display: grid;
grid-template-rows: 150px 1fr 100px;
grid-template-columns: 20% 20% 20% 20% 20%;

}

header {
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;

}

nav {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;

}

nav li {
display:inherit;
}


main {
grid-column-start: 2;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 3;

}

aside {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 3;

}

footer {
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;

}

}