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'.

Referenz

Eigenschaften

• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template abkürzende Eigenschaft
• grid abkürzende Eigenschaft
• grid-column-start
• grid-column-end
• grid-column abkürzende Eigenschaft
• grid-row-start
• grid-row-end
• grid-row abkürzende Eigenschaft
• grid-area abkürzende Eigenschaft

Funktionen

• repeat()
• minmax()
• fit-content()

Datentypen und Werte

• <flex> (fr Einheit)

Begriffe und Glossar-Definitionen

• Grid
• Gridbereiche
• Grid-Achse
• Gridzelle
• Gridspalte
• Grid-Container
• Gridlinien
• Gridreihe
• Grid-Tracks
• Rinnen

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.

Verwandte Funktionen

CSS Display Modul

• display
• order

CSS-Box-Ausrichtung Modul

• align-content
• align-items
• align-self
• column-gap
• gap
• justify-content
• justify-items
• justify-self
• place-content
• place-items
• place-self
• row-gap

CSS-Boxmodell-Größe Modul

• aspect-ratio
• box-sizing
• height
• max-height
• max-width
• min-height
• min-width
• width
• <ratio> Datentyp
• min-content Wert
• max-content Wert
• fit-content Wert
• fit-content() Funktion

Spezifikationen

Siehe auch

• CSS-Flexible-Box-Layout Modul
• CSS Display Modul
• Grid by example
• CSS-Grid-Referenz via Codrops
• Firefox DevTools: Grid-Inspektor
• CSS-Grid-Spielplatz
• CSS-Grid-Garten - Ein Spiel zum Erlernen von CSS-Grid