CSS Grid-Layout

Das CSS Grid-Layout-Modul eignet sich hervorragend zur Unterteilung einer Seite in Hauptbereiche oder zur Definition von Beziehungen in Bezug auf Größe, Position und Schichtreihenfolge zwischen Teilen eines mit HTML-Primitiven erstellten Steuerelements.

Ähnlich wie Tabellen ermöglicht das Grid-Layout dem Autor, Elemente in Spalten und Zeilen auszurichten. Allerdings sind mit dem CSS Grid weit mehr Layouts entweder möglich oder einfacher als mit Tabellen. Beispielsweise können sich die Kindelemente eines Grid-Containers so positionieren, dass sie tatsächlich überlappen und schichten, ähnlich wie CSS-positionierte Elemente.

Grid-Layout in Aktion

Das Beispiel zeigt ein Grid mit drei Spalten-Track, bei dem neue Zeilen mit einer Mindesthöhe von 100 Pixel und einer maximalen Autogröße erstellt werden. Elemente wurden mithilfe der linienbasierten Platzierung in das 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 Beispielanimation 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 anzusehen und zu bearbeiten, klicken Sie oben rechts im Beispiel auf "Play".

<flex> (fr Einheit)

Begriffe und Glossareinträge

Leitfäden

Grundkonzepte des Grid-Layouts: Ein Überblick über die verschiedenen Funktionen, die im CSS Grid-Layout-Modul bereitgestellt werden.
Beziehung des Grid-Layouts zu anderen Layoutmethoden: Wie das Grid-Layout mit anderen CSS-Funktionen einschließlich Flexbox, absolut positionierten Elementen und display: contents zusammenarbeitet.
Grid-Layout mit linienbasierter Platzierung: Grid-Linien und wie man Elemente gegen diese Linien positioniert, einschließlich der grid-area-Eigenschaften, negativer Liniennummern, des Überspannens mehrerer Zellen und der Erstellung von Grid-Rinnen.
Grid-Vorlagenbereiche: Platzierung von Grid-Elementen mit benannten Vorlagenbereichen.
Grid-Layout mit benannten Grid-Linien: Kombination von Namen und Trackgrößen; Platzierung von Grid-Elementen durch die Definition benannter Grid-Linien und Vorlagenbereiche.
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 Schreibmodi: Ein Blick auf die Interaktion zwischen CSS Grid-Layout, Box-Ausrichtung und Schreibmodi sowie auf CSS-logische und physische Eigenschaften und Werte.
Grid-Layout und Barrierefreiheit: Ein Blick darauf, wie das CSS Grid-Layout Barrierefreiheit unterstützen und beeinträchtigen kann.
Verwirklichung gängiger Layouts mit Grids: Einige verschiedene Layouts, die unterschiedliche Techniken demonstrieren, die Sie beim Entwerfen mit CSS-Grid-Layouts verwenden können, einschließlich der Verwendung von grid-template-areas, eines 12-Spalten flexiblen Rastersystems und einer Produktliste mit automatischer Platzierung.
Untergitter: Was das Untergitter mit Anwendungsfällen und Designmustern macht, die das Untergitter löst.
Masonry-Layout: Details zum Masonry-Layout und dessen Anwendung.
Box-Ausrichtung im CSS Grid-Layout: Wie die Box-Ausrichtung im Kontext des Grid-Layouts funktioniert.