Grundlegende Konzepte des Grid-Layouts
CSS Grid Layout führt ein zweidimensionales Rastersystem in CSS ein. Grids können verwendet werden, um große Seitenbereiche oder kleine Elemente der Benutzeroberfläche anzuordnen. Dieser Leitfaden stellt CSS Grid Layout und die Terminologie der CSS-Grid-Layout-Spezifikation vor. Die in diesem Überblick gezeigten Funktionen werden in den weiteren Leitfäden dieser Reihe ausführlicher erläutert.
Was ist ein Grid?
Ein Grid besteht aus sich kreuzenden horizontalen und vertikalen Linien, die Zeilen und Spalten definieren. Elemente können innerhalb dieser Spalten- und Zeilenlinien im Grid platziert werden. CSS Grid Layout bietet die folgenden Funktionen:
Feste und flexible Track-Größen
Sie können ein Grid mit festen Track-Größen erstellen, beispielsweise in Pixeln. Damit legen Sie die Größe der Tracks passend zum gewünschten Layout fest. Sie können auch ein Grid mit flexiblen Größen erstellen, indem Sie Prozentwerte oder die eigens dafür vorgesehene Einheit fr verwenden.
Platzierung von Elementen
Sie können Elemente mithilfe von Liniennummern, Namen oder durch Angabe eines Grid-Bereichs an einer bestimmten Position im Grid platzieren. Grid verfügt außerdem über einen Algorithmus, der die Platzierung von Elementen steuert, für die keine ausdrückliche Position im Grid angegeben wurde.
Erstellen zusätzlicher Tracks für Inhalte
Mit Grid Layout können Sie ein explizites Grid definieren. Die Funktionen des Grid-Layout-Moduls ermöglichen es, bei Bedarf zusätzliche Zeilen und Spalten hinzuzufügen. Dazu gehört beispielsweise die Möglichkeit, so viele Spalten hinzuzufügen, wie in einen Container passen.
Steuerung der Ausrichtung
Mit CSS Grid Layout und den Funktionen von CSS Box Alignment können Sie steuern, wie Elemente innerhalb eines Grid-Bereichs und wie das gesamte Grid ausgerichtet werden.
Steuerung überlappender Inhalte
Mehrere Elemente können in derselben Grid-Zelle oder demselben Grid-Bereich platziert werden und sich dabei teilweise überlappen. Die Stapelreihenfolge dieser Elemente lässt sich mit der Eigenschaft z-index steuern.
Grid ist eine leistungsfähige Layout-Methode. In Kombination mit anderen CSS-Funktionen wie Flexbox hilft sie Ihnen, responsive, flexible und barrierefreie Layouts zu erstellen. Der erste Schritt besteht darin, ein Grid in Ihrem Grid-Container zu erstellen.
Grid-Container
Wir erstellen einen Grid-Container, indem wir für ein Element display: grid oder display: inline-grid deklarieren. Dadurch werden alle direkten Kindelemente dieses Elements zu Grid-Elementen.
In diesem Beispiel gibt es ein umschließendes div mit der Klasse wrapper. Darin sind fünf Kindelemente verschachtelt.
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
Mit display: grid; machen wir .wrapper zu einem Grid-Container.
.wrapper {
display: grid;
}
Alle direkten Kindelemente sind nun Grid-Elemente. Im Webbrowser werden Sie zunächst keinen Unterschied zu ihrer vorherigen Darstellung sehen, da Grid für die Elemente ein einspaltiges Grid erstellt hat. Wenn Sie das Grid in den Entwicklerwerkzeugen Ihres Browsers untersuchen, sehen Sie möglicherweise ein kleines Symbol neben dem Wert grid. Klicken Sie darauf. In den meisten Browsern wird dann ein Overlay für das Grid dieses Elements im Browserfenster angezeigt.
Wenn Sie CSS Grid Layout kennenlernen und damit arbeiten, helfen Ihnen die Browserwerkzeuge dabei, die Struktur Ihrer Grids visuell besser zu verstehen.
Damit die Anordnung stärker einem Grid entspricht, müssen wir Spalten-Tracks hinzufügen.
Grid-Tracks
Wir definieren Zeilen und Spalten unseres Grids mit den Eigenschaften grid-template-rows und grid-template-columns. Diese definieren Grid-Tracks. Ein Grid-Track ist der Bereich zwischen zwei benachbarten Linien im Grid. Die folgende Abbildung zeigt einen hervorgehobenen Track – den Track der ersten Zeile unseres Grids.
Grid-Tracks werden im expliziten Grid mit den Eigenschaften grid-template-columns und grid-template-rows oder den Kurzschreibweisen grid und grid-template definiert. Tracks entstehen auch im impliziten Grid, wenn ein Grid-Element außerhalb der im expliziten Grid definierten Tracks platziert wird.
Einfaches Beispiel
Wir können unserem vorherigen Beispiel Spalten-Tracks hinzufügen, indem wir die Eigenschaft grid-template-columns ergänzen und die Größe der Spalten-Tracks festlegen.
Damit haben wir ein Grid mit drei jeweils 200 Pixel breiten Spalten-Tracks erstellt. Die Kindelemente werden in diesem Grid angeordnet, jeweils eines pro Grid-Zelle.
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
.wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Die Einheit fr
Tracks können mit jeder Längeneinheit definiert werden. Grid führt außerdem eine zusätzliche Längeneinheit ein, mit der sich flexible Grid-Tracks erstellen lassen. Die Einheit fr steht für einen Anteil des verfügbaren Platzes im Grid-Container. Die folgende Grid-Definition erstellt drei gleich breite Tracks, die entsprechend dem verfügbaren Platz wachsen oder schrumpfen.
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Ungleiche Größen
In diesem Beispiel definieren wir einen 2fr-Track und anschließend zwei 1fr-Tracks. Der verfügbare Platz wird in vier Teile aufgeteilt. Der erste Track erhält zwei Teile, die beiden folgenden Tracks jeweils einen Teil.
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
.wrapper {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
Flexible und absolute Größen kombinieren
In diesem letzten Beispiel kombinieren wir Tracks mit absoluten Größen und fr-Einheiten. Der erste Track ist 500px breit; diese feste Breite wird daher vom verfügbaren Platz abgezogen. Der verbleibende Platz wird in drei Teile aufgeteilt und den beiden flexiblen Tracks entsprechend ihrem Verhältnis zugewiesen.
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
.wrapper {
display: grid;
grid-template-columns: 500px 1fr 2fr;
}
Track-Listen mit der repeat()-Notation
Bei großen Grids mit vielen Tracks können Sie die Notation repeat() verwenden, um die gesamte Liste der Grid-Tracks oder einen Teil davon zu wiederholen. Beispielsweise kann die Grid-Definition
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
auch so geschrieben werden:
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Die Wiederholungsnotation kann für einen Teil der Track-Liste verwendet werden. In diesem Beispiel erstellen wir ein Grid mit acht Spalten: Auf einen ersten Track von 20px folgen sechs wiederholte 1fr-Tracks und zum Schluss ein weiterer Track von 20px.
.wrapper {
display: grid;
grid-template-columns: 20px repeat(6, 1fr) 20px;
}
Die Wiederholungsnotation (repeat()) verwendet die Track-Liste, um ein sich wiederholendes Track-Muster zu erstellen. In diesem Beispiel hat das Grid zehn Tracks: Auf einen 1fr-Track folgt ein 2fr-Track, und dieses Muster wird fünfmal wiederholt.
.wrapper {
display: grid;
grid-template-columns: repeat(5, 1fr 2fr);
}
Implizite und explizite Grids
Bei der Erstellung unseres Beispiel-Grids haben wir die Spalten-Tracks ausdrücklich mit der Eigenschaft grid-template-columns definiert. Die benötigten Zeilen erstellt Grid anhand des Inhalts. Die Spalten bilden das explizite Grid, während die Zeilen Teil des impliziten Grids sind.
Das explizite Grid besteht aus Zeilen und Spalten, die mit grid-template-columns oder grid-template-rows definiert werden. Das implizite Grid erweitert das definierte explizite Grid, wenn Inhalte außerhalb davon platziert werden. Dazu werden beispielsweise zusätzliche Grid-Linien für Zeilen erzeugt.
Wenn Sie etwas außerhalb des definierten Grids platzieren oder aufgrund der Inhaltsmenge weitere Grid-Tracks benötigt werden, erstellt Grid Zeilen und Spalten im impliziten Grid. Die Größe dieser impliziten Tracks wird standardmäßig automatisch bestimmt. Das bedeutet, dass sowohl ihr Inhalt als auch der verfügbare freie Platz im Grid-Container die Größe der erzeugten Zeilen oder Spalten beeinflussen. Das Schlüsselwort auto ermöglicht es den erzeugten Tracks, ihren Inhalt aufzunehmen und zugleich den verbleibenden Platz untereinander aufzuteilen.
Mit den Eigenschaften grid-auto-rows und grid-auto-columns können Sie für Tracks, die im impliziten Grid entstehen, auch eine feste Größe definieren.
In diesem Beispiel setzen wir grid-auto-rows: 200px. Dadurch sind die im impliziten Grid erzeugten Tracks 200px hoch.
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}
Track-Größen und minmax
Wenn wir ein explizites Grid einrichten oder die Größe automatisch erzeugter Zeilen oder Spalten festlegen, möchten wir den Tracks möglicherweise eine Mindestgröße geben und zugleich sicherstellen, dass sie sich an hinzugefügte Inhalte anpassen. Beispielsweise sollen unsere Zeilen vielleicht nie niedriger als 100 Pixel sein. Wenn ein Inhalt jedoch 300 Pixel Höhe benötigt, soll die betreffende Zeile auf diese Höhe anwachsen. Dafür gibt es die Funktion minmax().
In diesem Beispiel verwenden wir minmax() im Wert der Eigenschaft grid-auto-rows. Mit grid-auto-rows: minmax(100px, auto); sind automatisch erzeugte Zeilen mindestens 100px hoch; ihr Maximalwert ist auto. Durch auto als Maximalwert kann der Track wachsen, um seinen Inhalt aufzunehmen (bis zu seiner max-content-Größe), und zugleich verfügbaren freien Platz im Grid-Container mit anderen Tracks teilen.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
Grid-Linien
Beachten Sie, dass wir beim Definieren eines Grids die Grid-Tracks festlegen, nicht die Linien. Grid stellt uns daraufhin nummerierte Linien zur Verfügung, mit denen wir Elemente positionieren können. In unserem Grid mit drei Spalten und zwei Zeilen gibt es vier Spaltenlinien.
Die Nummerierung der Linien richtet sich nach dem Schreibmodus des Dokuments. Bei einer Sprache mit Schreibrichtung von links nach rechts befindet sich Linie 1 auf der linken Seite des Grids. Bei einer Sprache mit Schreibrichtung von rechts nach links befindet sie sich auf der rechten Seite. Linien können auch benannt werden. Dies wird im Leitfaden zum Grid-Layout mit benannten Grid-Linien erläutert.
Elemente anhand von Linien positionieren
Das folgende Beispiel zeigt die grundlegende linienbasierte Platzierung: Wenn wir ein Element platzieren, beziehen wir uns auf eine Linie statt auf einen Track. Im Leitfaden zum Grid-Layout mit linienbasierter Platzierung gehen wir näher darauf ein.
In diesem Beispiel werden die ersten beiden Elemente unseres Grids mit drei Spalten-Tracks mithilfe der Eigenschaften grid-column-start, grid-column-end, grid-row-start und grid-row-end platziert. Von links nach rechts betrachtet beginnt das erste Element an Spaltenlinie 1 und reicht bis Spaltenlinie 4, der äußersten rechten Linie unseres Grids. Es beginnt an Zeilenlinie 1 und endet an Zeilenlinie 3; damit erstreckt es sich über zwei Zeilen-Tracks.
Das zweite Element beginnt an Spaltenlinie 1 des Grids und erstreckt sich über einen Track. Dies ist die Standardeinstellung, daher müssen wir die Endlinie nicht angeben. Außerdem erstreckt es sich über zwei Zeilen-Tracks, von Zeilenlinie 3 bis Zeilenlinie 5. Die übrigen Elemente werden in den freien Bereichen des Grids platziert.
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.box2 {
grid-column-start: 1;
grid-row-start: 3;
grid-row-end: 5;
}
Verwenden Sie den Grid-Inspektor in Ihren Entwicklerwerkzeugen, um zu sehen, wie die Elemente anhand der Grid-Linien positioniert sind.
Kurzschreibweisen für die Positionierung anhand von Linien
Die oben verwendeten Einzelwerte lassen sich für Spalten mit der Kurzschreibweise grid-column und für Zeilen mit der Kurzschreibweise grid-row jeweils in einer Deklaration zusammenfassen. Das folgende Beispiel ergibt dieselbe Positionierung wie der vorherige Code, benötigt dafür aber deutlich weniger CSS. Der Wert vor dem Schrägstrich (/) bezeichnet die Startlinie, der Wert danach die Endlinie.
Wenn sich der Bereich nur über einen Track erstreckt, können Sie den Endwert weglassen.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column: 1 / 4;
grid-row: 1 / 3;
}
.box2 {
grid-column: 1;
grid-row: 3 / 5;
}
Grid-Zellen
Eine Grid-Zelle ist die kleinste Einheit eines Grids. Sie ähnelt konzeptionell einer Tabellenzelle. Wie wir in den vorherigen Beispielen gesehen haben, werden die Kindelemente nach der Definition eines Grids auf dem Elternelement jeweils in einer Zelle des Grids angeordnet. In der folgenden Abbildung ist die erste Zelle des Grids hervorgehoben.
Grid-Bereiche
Elemente können sich über eine oder mehrere Zellen erstrecken, sowohl über Zeilen als auch über Spalten. Dadurch entsteht ein Grid-Bereich. Grid-Bereiche müssen rechteckig sein – ein L-förmiger Bereich ist beispielsweise nicht möglich. Der hervorgehobene Grid-Bereich erstreckt sich über zwei Zeilen-Tracks und zwei Spalten-Tracks.
Zwischenräume
Zwischenräume zwischen Grid-Zellen können mit den Eigenschaften column-gap und row-gap oder der Kurzschreibweise gap erstellt werden. Im folgenden Beispiel fügen wir zwischen den Spalten einen Abstand von 10 Pixeln und zwischen den Zeilen einen Abstand von 1em hinzu.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 1em;
}
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
Der von den Zwischenräumen belegte Platz wird berücksichtigt, bevor der verbleibende Platz den flexiblen fr-Tracks zugewiesen wird. Bei der Größenberechnung verhalten sich Zwischenräume wie normale Grid-Tracks, allerdings können Sie darin keine Elemente platzieren. Bei der linienbasierten Positionierung verhält sich ein Zwischenraum wie eine dicke, transparente Linie.
Grids verschachteln
Ein Grid-Element kann selbst zu einem Grid-Container werden. Im folgenden Beispiel erweitern wir das zuvor gezeigte dreispaltige Grid mit zwei positionierten Elementen um untergeordnete Elemente im ersten Grid-Element. Da diese verschachtelten Elemente keine direkten Kindelemente des Grids sind, nehmen sie nicht am Grid-Layout teil und werden im normalen Dokumentfluss dargestellt.
Verschachtelung ohne subgrid
Wenn wir box1 auf display: grid setzen, können wir dafür Tracks definieren. Dadurch wird auch dieses Element zu einem Grid. Die darin enthaltenen Elemente werden dann in diesem neuen Grid angeordnet.
<div class="wrapper">
<div class="box box1">
<div class="nested">a</div>
<div class="nested">b</div>
<div class="nested">c</div>
</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
<div class="box box4">Four</div>
<div class="box box5">Five</div>
</div>
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
gap: 3px;
background-color: #fff4e6;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.box {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.nested {
border: 2px solid #ffec99;
border-radius: 5px;
background-color: #fff9db;
padding: 1em;
}
In diesem Fall hat das verschachtelte Grid keine Beziehung zum übergeordneten Grid. Wie Sie im Beispiel sehen können, hat es gap nicht vom übergeordneten Grid übernommen, und seine Linien sind nicht an den Linien des übergeordneten Grids ausgerichtet.
Subgrid
Neben gewöhnlichen Grids können wir auch ein Subgrid erstellen. Mit dem Wert subgrid lassen sich verschachtelte Grids erstellen, die die Track-Definition des übergeordneten Grids verwenden.
Dazu ändern wir im obigen Beispiel für das verschachtelte Grid die Track-Definition von grid-template-columns: repeat(3, 1fr) zu grid-template-columns: subgrid. Das verschachtelte Grid verwendet dann die Tracks des übergeordneten Grids, um seine Elemente anzuordnen.
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
display: grid;
grid-template-columns: subgrid;
}
Elemente mit z-index übereinanderlegen
Grid-Elemente können dieselbe Zelle belegen. In diesem Fall können wir mit der Eigenschaft z-index die Stapelreihenfolge der überlappenden Elemente steuern.
Überlappung ohne z-index
Kehren wir zu unserem Beispiel mit anhand von Liniennummern positionierten Elementen zurück. Wir können es so ändern, dass sich zwei Elemente überlappen.
<div class="wrapper">
<div class="box box1">One</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
<div class="box box4">Four</div>
<div class="box box5">Five</div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.box2 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 4;
}
Das Element box2 überlappt nun box1. Es wird darüber angezeigt, weil es in der Reihenfolge des Quelltexts später kommt.
Stapelreihenfolge steuern
Mit der Eigenschaft z-index können wir die Stapelreihenfolge der Elemente steuern – genau wie bei positionierten Elementen. Wenn wir box2 einen niedrigeren z-index als box1 geben, wird es im Stapel unter box1 angezeigt.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
z-index: 2;
}
.box2 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 4;
z-index: 1;
}
Nächste Schritte
In diesem Überblick haben wir die Möglichkeiten von Grid-Layouts kurz kennengelernt. Probieren Sie die Codebeispiele aus. Lesen Sie anschließend den Leitfaden über die Beziehung von Grid Layout zu anderen Layout-Methoden, in dem wir uns näher mit den Details von CSS Grid Layout befassen.