CSS-Grid-Layout

Das CSS-Grid-Layout-Modul ist hervorragend geeignet, um eine Seite in Hauptbereiche zu unterteilen oder die Beziehung in Bezug auf Größe, Position und Schichtung zwischen Teilen einer Kontrolle, die aus HTML-Primitiven besteht, zu definieren.

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

Grid-Layout in Aktion

Das Beispiel zeigt ein Drei-Spalten-Track-Grid mit neuen Reihen, die bei mindestens 100 Pixeln und höchstens automatisch erstellt werden. Elemente wurden unter Verwendung von linienbasierter Platzierung auf 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, und 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 Glossar-Definitionen

Leitfäden

Grundlegende Konzepte des Grid-Layouts: Ein Überblick über die verschiedenen Funktionen, die im CSS-Grid-Layout-Modul bereitgestellt werden.
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 unter Verwendung von linienbasierter Platzierung: Gridlinien und wie man Elemente entlang dieser Linien positioniert, einschließlich der grid-area-Eigenschaften, negativer Liniennummern, das Spannen mehrerer Zellen und das Erstellen von Grid-Rinnen.
Gridvorlagen-Bereiche: Platzierung von Grid-Elementen unter Verwendung benannter Vorlagenbereiche.
Grid-Layout mit benannten Grid-Linien: Kombination von Namen und Trackgrößen; Platzierung von Grid-Elementen durch Definieren benannter Grid-Linien und Vorlagenbereiche.
Automatische Platzierung im Grid-Layout: Wie das Grid Elemente platziert, die keine Deklaration von Platzierungseigenschaften haben.
Ausrichten von Elementen im CSS-Grid-Layout: Ausrichten, rechtfertigen 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 physikalischen Eigenschaften und Werten.
Grid-Layout und Barrierefreiheit: Ein Blick darauf, wie CSS-Grid-Layout sowohl Barrierefreiheit verbessern als auch beeinträchtigen kann.
Realisation gängiger Layouts mit Grids: Einige verschiedene Layouts, die verschiedene Techniken demonstrieren, die Sie bei der Gestaltung mit CSS-Grid-Layouts verwenden können, einschließlich der Verwendung von grid-template-areas, eines 12-Spalten-Flexible-Grid-Systems und einer Produktliste unter Verwendung der automatischen 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.