Layout mit CSS Grid

CSS Grid ist ein zweidimensionales Layout-System für Webseiten. Im Gegensatz zu Flexbox können gleichzeitig Zeilen und Spalten kontrolliert werden.

1. Motivation

Grid ist ideal für komplette Seitenlayouts: Header, Navigation, Inhalt, Sidebar und Footer.

2. Grid-Container

Ein Element wird zum Grid-Container mit display: grid. 
.container {
  display: grid;
}

Alle direkten Kinder werden automatisch Grid-Items.

3. Spalten und Zeilen definieren

Spalten und Zeilen werden mit grid-template-columns und grid-template-rows definiert. 
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}
fr steht für einen Anteil des verfügbaren Platzes.

4. Typisches Seitenlayout

<div class="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Inhalt</main>
  <footer>Footer</footer>
</div>
.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

5. Platzierung von Elementen

Grid-Items können explizit positioniert werden. 
header {
  grid-column: 1 / 3;
}

nav {
  grid-row: 2;
}

main {
  grid-row: 2;
  grid-column: 2;
}

6. Grid Areas

Grid Areas erlauben eine besonders lesbare Layout-Beschreibung. 
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
  grid-template-columns: 200px 1fr;
}
header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
footer { grid-area: footer; }

7. Abstände im Grid

Abstände zwischen Zellen werden mit gap definiert. 
.container {
  gap: 1rem;
}

8. Responsives Grid

Grid lässt sich leicht an Bildschirmgrößen anpassen. 
@media (max-width: 700px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
  }
}

9. Grid vs. Flexbox

In der Praxis werden Grid und Flexbox gemeinsam eingesetzt.

10. Zusammenfassung