CSS-Grid-Layout

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

Wie Tabellen ermöglicht das Grid-Layout einem Autor, Elemente in Spalten und Zeilen auszurichten. Mit CSS Grid sind jedoch viele Layouts entweder 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 schichten, ähnlich wie CSS-positionierte Elemente.

Grid-Layout in Aktion

Das Beispiel zeigt ein dreispaltiges Grid mit neuen Zeilen, die mit einer Mindesthöhe von 100 Pixeln und einer maximalen Höhe von „auto“ erstellt werden. Elemente wurden mithilfe einer 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 anzuzeigen und zu bearbeiten, klicken Sie oben rechts im Beispiel auf "Play".

<flex> (fr Einheit)

Begriffe und Glossardefinitionen

Leitfäden

Grundkonzepte des Grid-Layouts: Ein Überblick über die verschiedenen Funktionen, die im CSS-Grid-Layout-Modul bereitgestellt werden.
Beziehung des Grid-Layouts mit 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, das Überspannen von mehreren Zellen und das Erstellen von Grid-Rinnen.
Grid-Template-Bereiche: Platzierung von Grid-Elementen mit benannten Template-Bereichen.
Grid-Layout mit benannten Grid-Linien: Kombination von Namen und Spurgrößen; Platzierung von Grid-Elementen durch Definition benannter Grid-Linien und Template-Bereiche.
Automatische Platzierung im Grid-Layout: Wie das Grid Elemente platziert, die keine Platzierungseigenschaften deklariert haben.
Ausrichtung 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: Ein Blick auf die Interaktion zwischen CSS-Grid-Layout, Box-Ausgleich und Schreibrichtungen sowie CSS-logischen und physischen Eigenschaften und Werten.
Grid-Layout und Zugänglichkeit: Ein Blick darauf, wie das CSS-Grid-Layout sowohl Zugänglichkeit unterstützen als auch beeinträchtigen kann.
Verwirklichung gängiger Layouts mit Grids: Einige verschiedene Layouts, die verschiedene Techniken demonstrieren, die Sie beim Entwerfen mit CSS-Grid-Layouts verwenden können, einschließlich der Verwendung von grid-template-areas, eines flexiblen 12-Spalten-Grid-Systems und einer Produktliste mit automatischer Platzierung.
Untergrid: Was Untergrid tut mit Anwendungsfällen und Designmustern, die Untergrid löst.
Masonry-Layout: Details darüber, was das Masonry-Layout ist und wie es verwendet wird.
Box-Ausrichtung im CSS-Grid-Layout: Wie Box-Ausgleich im Kontext von Grid-Layout funktioniert.