CSS Grid-Layout

Das CSS Grid-Layout Modul eignet sich hervorragend dazu, eine Seite in Hauptregionen zu unterteilen oder die Beziehungen in Bezug auf Größe, Position und Schichtung zwischen Teilen eines aus HTML-Elementen erstellten Steuerungselements zu definieren.

Wie Tabellen ermöglicht das Grid-Layout einem Autor, Elemente in Spalten und Zeilen auszurichten. Viele Layouts sind jedoch entweder mit CSS Grid möglich oder einfacher als mit Tabellen. Beispielsweise könnten sich Kindelemente eines Grid-Containers so positionieren, dass sie sich tatsächlich überlappen und schichten, ähnlich wie CSS-Positionselemente.

Grid-Layout in Aktion

Das Beispiel zeigt ein Raster mit drei Spalten und neuen Zeilen, die bei einer Mindestgröße von 100 Pixel und einer maximalen Größe von auto erstellt werden. Elemente wurden mithilfe der zeilenbasierten Platzierung auf das Raster gelegt.

<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 Animationsbeispiel verwendet display, grid-template-columns, grid-template-rows und gap, um das Raster zu erstellen, und grid-column und grid-row, um Elemente innerhalb des Rasters zu positionieren. Um den in HTML und CSS verwendeten Code anzuzeigen und zu bearbeiten, klicken Sie auf ‚Play‘ oben rechts im Beispiel.

<flex> (fr Einheit)

Begriffe und Glossardefinitionen

Leitfäden

Grundkonzepte des Grid-Layouts: Ein Überblick über die verschiedenen Funktionen des CSS Grid-Layout-Moduls.
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 zeilenbasierter Platzierung: Grid-Linien und wie man Elemente anhand dieser Linien positioniert, einschließlich der grid-area-Eigenschaften, negativer Zeilennummern, über mehrere Zellen erstrecken und Erstellen von Grid-Kanälen.
Grid-Vorlagenbereiche: Platzieren von Grid-Elementen durch benannte Vorlagenbereiche.
Grid-Layout mit benannten Grid-Linien: Kombination von Namen und Spuren; Platzieren von Grid-Elementen durch Definieren von benannten Grid-Linien und Vorlagenbereichen.
Automatische Platzierung im Grid-Layout: Wie Grid Elemente positioniert, die keine Platzierungseigenschaften deklariert haben.
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 Schreibrichtungen: Eine Betrachtung der Interaktion zwischen CSS Grid-Layout, Box-Ausrichtung und Schreibrichtungen sowie CSS logischen und physischen Eigenschaften und Werten.
Grid-Layout und Barrierefreiheit: Eine Betrachtung, wie CSS Grid-Layout Barrierefreiheit fördern oder behindern kann.
Umsetzung gängiger Layouts mit Grids: Verschiedene Layouts, die unterschiedliche Techniken demonstrieren, die Sie bei der Gestaltung mit CSS Grid-Layouts verwenden können, einschließlich der Verwendung von grid-template-areas, einem 12-Spalten flexiblen Grid-System und einer Produktliste mit automatischer Platzierung.
Subgrid: Was Subgrid macht, mit Anwendungsfällen und Gestaltungsmustern, die Subgrid löst.
Masonry-Layout: Details, was 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 Flexibles Box-Layout Modul
CSS Display Modul
Grid by example
CSS Grid-Referenz via Codrops
Firefox DevTools: Grid-Inspektor
CSS Grid Playground
CSS Grid Garden - Ein Spiel, um CSS Grid zu lernen

CSS Grid-Layout

Grid-Layout in Aktion

Referenz

Eigenschaften

Funktionen

Datentypen und Werte

Begriffe und Glossardefinitionen

Leitfäden

Verwandte Funktionen

Spezifikationen

Siehe auch