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 Ebenenstruktur zwischen Teilen einer Steuerung zu definieren, die aus HTML-Primitiven erstellt wurde.

Wie Tabellen ermöglicht das Grid-Layout einem Autor, Elemente in Spalten und Reihen auszurichten. Mit CSS-Grid sind jedoch weit mehr Layouts entweder möglich oder einfacher umzusetzen als mit Tabellen. Beispielsweise 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 Grid mit neuen Reihen, die bei mindestens 100 Pixel und maximal automatisch erstellt werden. Elemente wurden anhand von linienbasierter Platzierung in das Grid eingefügt.

<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 sowie grid-row, um Elemente innerhalb des Grids zu positionieren. Um den verwendeten HTML- und CSS-Code anzusehen und zu bearbeiten, klicken Sie auf „Abspielen" oben rechts im Beispiel.

Referenz

Eigenschaften

• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template Kurzform
• grid Kurzform
• grid-column-start
• grid-column-end
• grid-column Kurzform
• grid-row-start
• grid-row-end
• grid-row Kurzform
• grid-area Kurzform

Funktionen

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

Datentypen und Werte

• <flex> (fr Einheit)

Begriffe und Glossar-Definitionen

• Grid
• Grid-Bereiche
• Grid-Achse
• Grid-Zelle
• Grid-Spalte
• Grid-Container
• Grid-Linien
• Grid-Reihe
• Grid-Spuren
• Rinnen

Leitfäden

Grundkonzepte des Grid-Layouts

Ein Überblick über die verschiedenen Funktionen, die im CSS-Grid-Layout-Modul bereitgestellt werden.

Beziehung des Grid-Layouts zu 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, die mehrere Zellen umfassen, und Gitterrinnen erstellt.

Grid-Template-Bereiche

Platzieren von Grid-Elementen mithilfe benannter Template-Bereiche.

Grid-Layout mit benannten Grid-Linien

Kombinieren von Namen und Spurgrößen; Platzieren von Grid-Elementen durch Definition benannter Grid-Linien und Template-Bereiche.

Automatische Platzierung im Grid-Layout

Wie Grid Elemente positioniert, die keine Platzierungseigenschaften deklariert 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 Schreibmodi

Ein Blick auf die Interaktion zwischen CSS-Grid-Layout, Box-Ausrichtung und Schreibmodi zusammen mit CSS-logischen und physikalischen Eigenschaften und Werten.

Grid-Layout und Zugänglichkeit

Ein Überblick darüber, wie CSS-Grid-Layout sowohl zur Barrierefreiheit beitragen als auch ihr schaden kann.

Verwirklichung gängiger Layouts mit Grids

Einige verschiedene Layouts, die unterschiedliche Techniken demonstrieren, die Sie bei der Gestaltung mit CSS-Grid-Layouts verwenden können, einschließlich Nutzung von grid-template-areas, einem flexiblen 12-Spalten-Grid-System und einer Produktliste mit automatischer 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-Box-Größenanpassung 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 über Codrops
• Firefox DevTools: Grid-Inspektor
• CSS-Grid-Spielwiese
• CSS-Grid-Garten - Ein Spiel zum Lernen von CSS-Grid