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;
}
.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;
}