CSS-Grid-Layout

Das CSS-Grid-Layout-Modul eignet sich hervorragend, um eine Seite in Hauptbereiche zu unterteilen oder die Beziehung in Bezug auf Größe, Position und Ebenenstruktur zwischen Teilen einer Steuerung zu definieren, die aus HTML-Primitiven erstellt wurde.

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

Grid-Layout in Aktion

Das Beispiel zeigt ein dreispaltiges Grid mit neuen Reihen, die bei mindestens 100 Pixel und maximal automatisch erstellt werden. Elemente wurden anhand von linienbasierter Platzierung in das Grid eingefügt.

<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, und grid-column sowie grid-row, um Elemente innerhalb des Grids zu positionieren. Um den verwendeten HTML- und CSS-Code anzusehen und zu bearbeiten, klicken Sie auf „Abspielen“ oben rechts im Beispiel.

<flex> (fr Einheit)

Begriffe und Glossar-Definitionen

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 zusammenpasst, einschließlich Flexbox, absolut positionierten Elementen und display: contents.
Grid-Layout mit linienbasierter Platzierung: Grid-Linien und wie man Elemente an diesen Linien positioniert, einschließlich der grid-area Eigenschaften, negativer Liniennummern, die mehrere Zellen umfassen, und Gitterrinnen erstellt.
Grid-Template-Bereiche: Platzieren von Grid-Elementen mithilfe benannter Template-Bereiche.
Grid-Layout mit benannten Grid-Linien: Kombinieren von Namen und Spurgrößen; Platzieren von Grid-Elementen durch Definition benannter Grid-Linien und Template-Bereiche.
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 zusammen mit CSS-logischen und physikalischen Eigenschaften und Werten.
Grid-Layout und Zugänglichkeit: Ein Überblick darüber, wie CSS-Grid-Layout sowohl zur Barrierefreiheit beitragen als auch ihr schaden kann.
Verwirklichung gängiger Layouts mit Grids: Einige verschiedene Layouts, die unterschiedliche Techniken demonstrieren, die Sie bei der Gestaltung mit CSS-Grid-Layouts verwenden können, einschließlich Nutzung von grid-template-areas, einem flexiblen 12-Spalten-Grid-System und einer Produktliste mit automatischer Platzierung.
Subgrid: Was Subgrid mit Anwendungsfällen und Designmustern macht, die Subgrid löst.
Masonry-Layout: Details, was Masonry-Layout ist und wie es verwendet wird.
Box-Ausrichtung im CSS-Grid-Layout: Wie die 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-Spielwiese
CSS-Grid-Garten - Ein Spiel zum Lernen von CSS-Grid

CSS-Grid-Layout

Grid-Layout in Aktion

Referenz

Eigenschaften

Funktionen

Datentypen und Werte

Begriffe und Glossar-Definitionen

Leitfäden

Verwandte Funktionen

Spezifikationen

Siehe auch