Zum Inhalt springen
Online Lehrbuch

CSS Grid - Areas

Bereiche benennen: grid-template-areas

Abschnitt betitelt „Bereiche benennen: grid-template-areas“

Statt Kinder nur der Reihe nach einzusortieren, könnt ihr den Feldern des Grids Namen geben - und Elemente gezielt einem benannten Bereich zuweisen:

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px auto 60px;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
}
  • Jede Zeile in Anführungszeichen steht für eine Zeile des Grids
  • Innerhalb einer Zeile ist jedes Wort ein Feld, getrennt durch Leerzeichen
  • Ein Punkt (.) steht für ein Feld, das frei bleibt

Areas dem HTML zuweisen: grid-area

Abschnitt betitelt „Areas dem HTML zuweisen: grid-area“

Die Namen aus grid-template-areas weist ihr den einzelnen Elementen über grid-area zu - rein in CSS, ganz ohne Änderungen im HTML:

header  { grid-area: header; }
nav     { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }

Vollständiges Beispiel: ein klassisches Seiten-Layout mit Sidebar

<div class="page">
  <header>Kopfzeile</header>
  <nav>Navigation</nav>
  <main>Hauptinhalt</main>
  <footer>Fußzeile</footer>
</div>
.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px auto 60px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 16px;
}


header  { grid-area: header; }
nav     { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }

Ein Feld über mehrere Zellen spannen

Abschnitt betitelt „Ein Feld über mehrere Zellen spannen“

Eine Area kann mehrere Felder des Grids überspannen - solange am Ende ein Rechteck entsteht:

.page {
  grid-template-areas:
    "headline headline subhead"
    "portrait content  content"
    "facts    content  source";
}

⚠️ Eine Area muss ein sauberes Rechteck bilden. content in diesem Beispiel spannt zwei Zeilen und zwei Spalten - aber ein L-förmiger oder Tetris-artiger Bereich ist nicht erlaubt.

Feste Felder positionieren: grid-column/grid-row

Abschnitt betitelt „Feste Felder positionieren: grid-column/grid-row“

Statt benannter Areas könnt ihr Elemente auch direkt über Zeilen-/Spaltennummern positionieren - praktisch, wenn ihr keine Namen vergeben wollt:

.hero {
  grid-column: 1 / 3;  /* von Linie 1 bis Linie 3 = über 2 Spalten */
  grid-row: 1 / 2;
}

Subgrid: auch Enkelkinder ausrichten

Abschnitt betitelt „Subgrid: auch Enkelkinder ausrichten“

Mit normalem Grid könnt ihr nur die direkten Kinder eines Grid-Containers positionieren. Mit subgrid gibt ein verschachteltes Grid sein Raster an seine eigenen Kinder weiter:

.card {
  display: grid;
  grid-template-columns: subgrid; /* übernimmt die Spalten des Eltern-Grids */
  grid-column: span 3;
}