Webentwicklung - CSS-Grid-LayoutsHochschule für Technik und Wirtschaft Berlin, Dipl.-Inform. Thomas Ziemer |
|
|
Dipl.-Inform. Thomas Ziemer
%messages.pagePresentation.showMaximized%Ein simples Zweispalten-Layout mit Kopf- und Fußbereich:
body {
height: 100vh; /* relativ zu 1% der Viewport-Höhe */
margin: 0;
display: grid /* nicht mehr flex */;
}
<body>
<header>Überschrift</header>
<nav>Navigation</nav>
<main>Inhalt</main>
<footer>Fußzeilen</footer>
</body>
Vorläufiges Ergebnis: Die vier Blöcke teilen sich den freien Platz im Container (im Viewport des Browsers) in Abhängigkeit ihres natürlichen Platzbedarfs.
Die Farben wurden dem Style nur zur besseren Erkennbarkeit hinzugefügt.
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }
body {
height: 100vh;
margin: 0;
display: grid;
grid-template-areas: "header header" "nav main" "nav footer";
grid-template-columns: 8em 1fr; /* nav fest | main flexibel */
grid-template-rows: 4em 1fr 4em; /* fest - flexibel - fest */
grid-gap: .5em .5em; /* Zeile Spalte */
}
body {
height: 100vh; margin: 0;
display: grid;
grid-template-columns: 8em 1fr;
grid-template-rows: 4em 1fr 4em;
grid-template-areas: "header header"
"nav main" "nav footer";
grid-gap: .5em .5em; /* Zeile Spalte */
}
header {
grid-area: header; color: orange;
}
nav {
grid-area: nav; color: lightgreen;
}
main {
grid-area: main; color: lightblue;
}
footer {
grid-area: footer; color: yellow;
}fr führt das CSS-Grid-Modul eine neue Größeneinheit einfr-Angaben zueinander:
grid-template-columns: 1fr 1fr 1fr; /* 3 gleichbreite Spalten */
grid-template-columns: 2fr 1fr; /* 2 Spalten mit ⅔ zu ⅓ */
grid-template-columns: 4em 1fr 4em; /* 2 feste Spalten, 1 var. */