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 Überlagerung zwischen Teilen einer Steuerung zu definieren, die aus HTML-Elementen besteht.

Wie Tabellen ermöglicht das Grid-Layout einem Autor, Elemente in Spalten und Zeilen auszurichten. Allerdings sind viele Layouts entweder einfacher oder überhaupt erst mit CSS Grid möglich im Vergleich zu Tabellen. Beispielsweise könnten Kindelemente eines Grid-Containers sich so positionieren, dass sie tatsächlich übereinander liegen und schichten, ähnlich wie CSS-positionierte Elemente.

Grid-Layout in Aktion

Das Beispiel zeigt ein Grid mit drei Spaltenspuren, bei dem neue Reihen mit minimal 100 Pixel und maximal automatisch erstellt werden. Elemente wurden mithilfe der linienbasierten 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 anzusehen und zu bearbeiten, klicken Sie auf 'Play' oben rechts im Beispiel.

<flex> (fr Einheit)

Begriffe und Glossareinträge

Leitfäden

Grundkonzepte des Grid-Layouts: Ein Überblick über die verschiedenen Funktionen, die das CSS Grid-Layout-Modul bietet.
Beziehung des Grid-Layouts zu anderen Layout-Methoden: Wie das Grid-Layout mit anderen CSS-Funktionen wie Flexbox, absolut positionierten Elementen und display: contents zusammenpasst.
Grid-Layout mit linienbasierter Platzierung: Grid-Linien und wie man Elemente gegen diese Linien positioniert, einschließlich der grid-area Eigenschaften, negativer Liniennummern, über mehrere Zellen erstreckend und Gitterrinnen erstellend.
Grid-Template-Bereiche: Platzieren von Grid-Elementen unter Verwendung benannter Template-Bereiche.
Grid-Layout mit benannten Grid-Linien: Kombination von Namen und Spurengrößen; Platzierung von Grid-Elementen durch Definition benannter Grid-Linien und Template-Bereiche.
Automatische Platzierung im Grid-Layout: Wie Grid Elemente positioniert, die keine Platzierungs-Eigenschaften deklariert haben.
Ausrichten von Elementen im CSS Grid-Layout: Ausrichten, Justifizieren 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, Kasten-Ausrichtung und Schreibrichtungen, zusammen mit CSS logischen und physischen Eigenschaften und Werten.
Grid-Layout und Barrierefreiheit: Ein Blick darauf, wie CSS Grid-Layout sowohl helfen als auch die Barrierefreiheit beeinträchtigen kann.
Realisierung 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, einem flexiblen 12-Spalten-Raster-System, und einer Produktliste mit automatischer Platzierung.
Subgrid: Was Subgrid tut, mit Anwendungsfällen und Designmustern, die Subgrid löst.
Masonry-Layout: Details, was das 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

Spezifikation
CSS Grid Layout Module Level 2

Siehe auch

CSS Flexibles 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 Lernen von CSS Grid

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

CSS Grid Layout

Grid-Layout in Aktion

Referenz

Eigenschaften

Funktionen

Datentypen und Werte

Begriffe und Glossareinträge

Leitfäden

Verwandte Funktionen

Spezifikationen

Siehe auch

Help improve MDN