CSS-Grid-Layout

Das CSS-Grid-Layout-Modul eignet sich hervorragend zum Aufteilen einer Seite in Hauptbereiche oder zum Definieren der Beziehung in Bezug auf Größe, Position und Schichtung zwischen Teilen einer Steuerung, die aus HTML-Primitiven erstellt wurde.

Ähnlich wie Tabellen ermöglicht das Grid-Layout es einem Autor, Elemente in Spalten und Zeilen auszurichten. Im Vergleich zu Tabellen sind jedoch viele Layouts mit CSS-Grid entweder einfacher oder überhaupt erst möglich. Zum Beispiel könnten sich die Kind-Elemente eines Grid-Containers so positionieren, dass sie sich tatsächlich überlagern und schichten, ähnlich wie bei CSS-Positionierungselementen.

Grid-Layout in Aktion

Dieses Beispiel zeigt ein Grid mit drei Spaltenspuren, bei dem neue Zeilen mit einer minimalen Höhe von 100 Pixeln und einer maximalen Höhe von auto erstellt werden. Elemente wurden mithilfe der linienbasierten Platzierung ins Grid gesetzt.

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}
.wrapper > div {
  border: 2px solid rgb(233 171 88);
  border-radius: 5px;
  background-color: rgb(233 171 88 / 50%);
  padding: 1em;
  color: #d9480f;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

Diese Beispielsanimation verwendet display, grid-template-columns, grid-template-rows und gap, um das Grid zu erstellen, sowie grid-column und grid-row, um Elemente innerhalb des Grids zu positionieren. Um den verwendeten HTML- und CSS-Code anzuzeigen und zu bearbeiten, klicken Sie oben rechts im Beispiel auf "Play".

<flex> (fr-Einheit)

Begriffe und Glossareinträge

Leitfäden

Grundlegende Konzepte des Grid-Layouts: Ein Überblick über die verschiedenen Funktionen, die das CSS-Grid-Layout-Modul bereitstellt.
Beziehung des Grid-Layouts zu anderen Layout-Methoden: Wie das Grid-Layout mit anderen CSS-Funktionen wie Flexbox, absolut positionierten Elementen und display: contents zusammenarbeitet.
Grid-Layout mit linienbasierter Platzierung: Grid-Linien und wie Elemente an diesen Linien positioniert werden, einschließlich der grid-area-Eigenschaften, negativer Liniennummern, der Überlappung mehrerer Zellen und der Erstellung von Grid-Gaps.
Grid-Vorlagenbereiche: Platzierung von Grid-Elementen mithilfe benannter Vorlagenbereiche.
Grid-Layout mit benannten Grid-Linien: Kombinierung von Namen und Spurgrößen; Platzierung von Grid-Elementen durch Definieren benannter Grid-Linien und Vorlagenbereiche.
Auto-Platzierung im Grid-Layout: Wie Grid-Positionierung für Elemente ohne deklarierte Platzierungseigenschaften funktioniert.
Ausrichten von Elementen im CSS-Grid-Layout: Ausrichten, Justieren und Zentrieren von Grid-Elementen entlang der beiden Achsen eines Grid-Layouts.
Grids, logische Werte und Schreibmodi: Ein Blick auf die Interaktion zwischen CSS-Grid-Layout, Box-Ausrichtung und Schreibmodi sowie CSS-logischen und physischen Eigenschaften und Werten.
Grid-Layout und Barrierefreiheit: Ein Blick darauf, wie CSS-Grid-Layout Barrierefreiheit sowohl verbessern als auch beeinträchtigen kann.
Umsetzung gängiger Layouts mithilfe von Grids: Verschiedene Layouts, die unterschiedliche Techniken demonstrieren, die Sie beim Designen mit CSS-Grid-Layouts verwenden können, einschließlich der Verwendung von grid-template-areas, eines flexiblen 12-Spalten-Grid-Systems und einer Produktliste mit automatischer Platzierung.
Subgrid: Was Subgrid ist, mit Anwendungsfällen und Designmustern, die Subgrid löst.
Masonry-Layout: Details, was ein Masonry-Layout ist und wie es verwendet wird.
Box-Ausrichtung im CSS-Grid-Layout: Wie Box-Ausrichtung im Kontext des Grid-Layouts funktioniert.

Spezifikationen

Specification
CSS Grid Layout Module Level 2

Siehe auch

CSS Flexible Box Layout-Modul
CSS-Display-Modul
Grid by Example
CSS-Grid-Referenz über Codrops
Firefox DevTools: Grid-Inspektor
CSS-Grid-Spielplatz
CSS-Grid-Garten - Ein Spiel, um CSS-Grid zu lernen

CSS-Grid-Layout

Grid-Layout in Aktion

Referenz

Eigenschaften

Funktionen

Datentypen und Werte

Begriffe und Glossareinträge

Leitfäden

Verwandte Funktionen

Spezifikationen

Siehe auch