Folge mir auf Twitter.

Webentwicklung - CSS-Grid-Layouts

Hochschule für Technik und Wirtschaft Berlin

Dipl.-Inform. Thomas Ziemer

Webentwicklung - CSS-Grid-Layouts

Dipl.-Inform. Thomas Ziemer

Grid-Layouts

Native Grid-Layouts

Webentwicklung - CSS-Grid-Layouts

Aufbau nativer Grid-Layouts

Aufbau nativer Grid-Layouts

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>

Aufbau nativer Grid-Layouts

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.

Aufbau nativer Grid-Layouts


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 */
}

Aufbau nativer Grid-Layouts

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

Einheit "fr"

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. */

Puh, fertig!

Nächster Foliensatz...