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 Überlagerung zwischen Teilen eines Steuerelements zu definieren, das aus HTML-Primitiven erstellt wurde.

Wie Tabellen ermöglicht das Grid-Layout einem Autor, Elemente in Spalten und Reihen auszurichten. Allerdings sind mit CSS-Grid weitaus mehr Layouts entweder möglich oder einfacher als mit Tabellen. Zum Beispiel 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 Raster mit neuen Zeilen, die bei mindestens 100 Pixeln und maximal automatisch erstellt werden. Elemente wurden mithilfe der linienbasierten Platzierung auf das Raster 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 Beispiellanimation verwendet display, grid-template-columns, grid-template-rows und gap, um das Raster zu erstellen, und grid-column und grid-row, um die Elemente im Raster 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 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 zusammenhängt.
Grid-Layout mit linienbasierter Platzierung: Grid-Linien und wie man Elemente an diesen Linien positioniert, einschließlich der grid-area-Eigenschaften, negativer Linienzahlen, Mehrzellenbereiche und Erstellung von Grid-Rinnen.
Grid-Template-Bereiche: Platzierung von Grid-Elementen mithilfe benannter Vorlagenbereiche.
Grid-Layout mit benannten Grid-Linien: Kombination von Namen und Spurgrößen; Platzierung von Grid-Elementen durch Definition benannter Grid-Linien und Vorlagenbereiche.
Automatische Platzierung im Grid-Layout: Wie Grid-Elemente platziert werden, die keine Platziereigenschaften 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: Einblick in die Interaktion zwischen CSS-Grid-Layout, Box-Ausrichtung und Schreibrichtungen sowie CSS-logischen und -physikalischen Eigenschaften und Werte.
Grid-Layout und Barrierefreiheit: Ein Blick darauf, wie CSS-Grid-Layout die Barrierefreiheit sowohl unterstützen als auch beeinträchtigen kann.
Übliche Layouts mit Grids realisieren: Einige verschiedene Layouts, die verschiedene Techniken demonstrieren, die Sie beim Design mit CSS-Grid-Layouts verwenden können, einschließlich der Verwendung von grid-template-areas, eines 12-spaltigen Flex-Rastersystems und einer Produktliste mit automatischer Platzierung.
Subgrid: Was Subgrid mit Anwendungsfällen macht und Designmuster, die Subgrid löst.
Grid-Lanes-Layout: Details, was das Grid-Lanes-Layout ist und wie man es verwendet.
Box-Ausrichtung im CSS-Grid-Layout: Wie die Box-Ausrichtung im Kontext des Grid-Layouts funktioniert.