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 Benutzeroberflächenelemente anzuordnen. Dieser Leitfaden führt in das CSS-Grid-Layout und die Terminologie ein, die Teil der CSS-Grid-Layout-Spezifikation ist. Die in dieser Übersicht gezeigten Funktionen werden dann in den anderen Leitfäden dieser Serie ausführlicher erklärt.
Was ist ein Grid?
Ein Grid ist ein Satz sich kreuzender horizontaler und vertikaler Linien, die Reihen und Spalten definieren. Elemente können innerhalb dieser Spalten- und Reihenlinien auf das Grid positioniert werden. CSS-Grid-Layout hat die folgenden Merkmale:
Feste und flexible Spurgrößen
Sie können ein Grid mit festen Spurgrößen erstellen – zum Beispiel unter Verwendung von Pixeln. Dies setzt das Grid auf die spezifizierten Pixel, die zu dem gewünschten Layout passen. Sie können auch ein Grid mit flexiblen Größen mit Prozentangaben oder mit der für diesen Zweck entwickelten fr-Einheit erstellen.
Platzierung von Elementen
Sie können Elemente an einem genauen Ort im Grid platzieren, indem Sie Liniennummern, Namen verwenden oder einen Bereich des Grids ansprechen. Grid enthält auch einen Algorithmus, um die Platzierung von Elementen zu steuern, denen kein expliziter Platz auf dem Grid zugewiesen wurde.
Erstellung zusätzlicher Spuren zur Aufnahme von Inhalten
Sie können ein explizites Grid mit dem Grid-Layout definieren. Die im Grid-Layout-Modul definierten Funktionen bieten die Flexibilität, bei Bedarf zusätzliche Reihen und Spalten hinzuzufügen. Funktionen wie das Hinzufügen von "so vielen Spalten, wie in einen Container passen", sind enthalten.
Ausrichtungssteuerung
CSS-Grid-Layout und CSS-Box-Ausrichtung Funktionen ermöglichen es uns, zu steuern, wie die Elemente ausgerichtet werden, sobald sie in einen Grid-Bereich platziert wurden, und wie das gesamte Grid ausgerichtet wird.
Steuerung überlappender Inhalte
Mehr als ein Element kann in eine Grid-Zelle oder einen Bereich platziert werden und sie können sich teilweise überlappen. Diese Schichtbildung kann dann mit der z-index-Eigenschaft gesteuert werden.
Grid ist eine leistungsstarke Layout-Methode, die in Kombination mit anderen Teilen von CSS, wie flexbox, Ihnen helfen kann, Layouts zu erstellen, die reaktionsschnell, flexibel und zugänglich sind. Alles beginnt mit der Erstellung eines Grids in Ihrem grid container.
Grid-Container
Wir erstellen einen Grid-Container, indem wir display: grid oder display: inline-grid bei einem Element deklarieren. Sobald wir dies tun, werden alle direkten Kinder dieses Elements zu Grid-Items.
In diesem Beispiel haben wir ein umschließendes div mit einer Klasse von wrapper. Darin sind fünf Kind-Elemente verschachtelt.
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
Wir machen die .wrapper zu einem Grid-Container mit display: grid;.
.wrapper {
display: grid;
}
Alle direkten Kinder sind jetzt Grid-Items. In einem Webbrowser werden Sie keinen Unterschied darin sehen, wie diese Elemente angezeigt werden, bevor sie in ein Grid verwandelt wurden, da Grid ein einspaltiges Grid für die Elemente erstellt hat. Wenn Sie das Grid in den Entwicklerwerkzeugen Ihres Browsers inspizieren, sehen Sie möglicherweise ein kleines Symbol neben dem Wert grid. Klicken Sie darauf, und in den meisten Browsern wird das Grid auf diesem Element im Browserfenster überlagert.
Wenn Sie das CSS-Grid-Layout lernen und dann damit arbeiten, geben Ihnen Ihre Browser-Tools eine bessere Vorstellung davon, was mit Ihren Grids visuell passiert.
Wenn wir beginnen wollen, dies grid-ähnlicher zu machen, müssen wir Spaltenspuren hinzufügen.
Grid-Spuren
Wir definieren Reihen und Spalten auf unserem Grid mit den grid-template-rows und grid-template-columns Eigenschaften. Diese definieren grid tracks. Eine grid track ist der Raum zwischen zwei benachbarten Linien auf dem Grid. Das Bild unten zeigt eine hervorgehobene Spur – dies ist die erste Reihen-Spur in unserem Grid.
Grid-Spuren werden im expliziten Grid durch die Verwendung der Eigenschaften grid-template-columns und grid-template-rows oder die Kurzschreibweise grid oder grid-template definiert. Spuren werden auch im impliziten Grid erstellt, indem ein Grid-Item außerhalb der im expliziten Grid erstellten Spuren positioniert wird.
Einfaches Beispiel
Wir können Spaltenspuren zu unserem früheren Beispiel hinzufügen, indem wir die Eigenschaft grid-template-columns hinzufügen und dann die Größe der Spaltenspuren definieren.
Wir haben nun ein Grid mit drei 200 Pixel breiten Spaltenspuren erstellt. Die Kind-Elemente werden auf diesem Grid je eines in jede Grid-Zelle angeordnet.
<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 fr-Einheit
Spuren können mit jeder Längeneinheit definiert werden. Grid führt auch eine zusätzliche Längeneinheit ein, um uns zu helfen, flexible Grid-Spuren zu erstellen. Die fr Einheit repräsentiert einen Bruchteil des verfügbaren Platzes im Grid-Container. Die nächste Grid-Definition würde drei gleich breite Spuren erstellen, die sich je nach verfügbarem Platz vergrößern oder verkleinern.
<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 erstellen wir eine Definition mit einer 2fr-Spur und dann zwei 1fr-Spuren. Der verfügbare Platz wird in vier Teile geteilt. Zwei Teile werden der ersten Spur gegeben und jeweils ein Teil den nächsten beiden Spuren.
<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;
}
Mischen von flexiblen und festen Größen
In diesem letzten Beispiel mischen wir festgelegte Spuren mit fr-Einheiten. Die erste Spur ist 500px, so dass die feste Breite vom verfügbaren Platz abgezogen wird. Der verbleibende Raum wird in drei Teile geteilt und den beiden flexiblen Spuren proportional 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;
}
Spurauflistungen mit repeat() Notation
Große Grids mit vielen Spuren können die repeat() Notation verwenden, um die gesamte Liste der Grid-Spuren oder einen Teil davon zu wiederholen. Zum Beispiel kann die Grid-Definition:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
auch geschrieben werden als:
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Die Repeat-Notation kann für einen Teil der Spurenliste verwendet werden. In diesem Beispiel erstellen wir ein 8-spaltiges Grid; die erste Spur ist 20px, dann ein wiederholender Abschnitt von 6 1fr-Spuren und eine letzte 20px-Spur.
.wrapper {
display: grid;
grid-template-columns: 20px repeat(6, 1fr) 20px;
}
Die Repeat-Notation (repeat()) verwendet die Spurliste, um ein sich wiederholendes Muster von Spuren zu erstellen. In diesem Beispiel wird das Grid 10 Spuren haben; eine 1fr Spur wird von einer 2fr Spur gefolgt, wobei dieses Muster fünfmal wiederholt wird.
.wrapper {
display: grid;
grid-template-columns: repeat(5, 1fr 2fr);
}
Implizite und explizite Grids
Beim Erstellen unseres Beispiel-Grids haben wir unsere Spaltenspuren ausdrücklich mit der Eigenschaft grid-template-columns definiert, wobei das Grid bei Bedarf Reihen erstellt, um den Inhalt aufzunehmen. Die Spalten definieren das explizite Grid, während die Reihen Teil des impliziten Grids sind.
Das explizite Grid besteht aus Reihen und Spalten, die mit grid-template-columns oder grid-template-rows definiert sind. Das implizite Grid erweitert das definierte explizite Grid, wenn Inhalt außerhalb dieses Grids platziert wird, z. B. in den Reihen durch das Zeichnen zusätzlicher Grid-Linien.
Wenn Sie etwas außerhalb des definierten Grids platzieren oder aufgrund der Menge an Inhalt weitere Grid-Spuren benötigt werden, erstellt das Grid Reihen und Spalten im impliziten Grid. Diese impliziten Spuren sind standardmäßig auto-groß, was bedeutet, dass die Größe der erstellten Reihen oder Spalten sowohl durch ihren Inhalt als auch durch den verfügbaren freien Raum innerhalb des Grid-Containers beeinflusst wird. Das auto Schlüsselwort ermöglicht es, dass die generierten Spuren den Inhalt aufnehmen und auch den verbleibenden Raum teilen.
Sie können auch eine feste Größe für die im impliziten Grid erstellen Spuren mit den Eigenschaften grid-auto-rows und grid-auto-columns definieren.
In diesem Beispiel setzen wir grid-auto-rows: 200px, wodurch sichergestellt wird, dass die im impliziten Grid erstellten Spuren 200px hoch sind.
<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;
}
Spurgrößen und minmax
Wenn wir ein explizites Grid einrichten oder die Größe für automatisch erstellte Reihen oder Spalten definieren, möchten wir möglicherweise Spuren eine Mindestgröße geben, aber auch sicherstellen, dass sie sich ausdehnen, um jeden hinzugefügten Inhalt aufzunehmen. Zum Beispiel möchten wir, dass unsere Reihen niemals kleiner als 100 Pixel zusammenfallen, aber wenn unser Inhalt sich auf 300 Pixel in der Höhe erstreckt, möchten wir, dass sich die Reihe auf diese Höhe erstreckt. Dies wird durch die minmax() Funktion gelöst.
In diesem Beispiel verwenden wir minmax() innerhalb des Werts der grid-auto-rows Eigenschaft. Indem wir grid-auto-rows: minmax(100px, auto); setzen, werden automatisch erstellte Reihen mindestens 100px hoch sein und ein Maximum von auto haben. Die Einstellung von auto als maximalem Wert ermöglicht es der Spur, sich an ihren Inhalt anzupassen (bis zu ihrer max-content Größe), während sie auch jeden verfügbaren freien Raum innerhalb des Grid-Containers teilt.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
Grid-Linien
Es sollte beachtet werden, dass wir, wenn wir ein Grid definieren, die Grid-Spuren, nicht die Linien definieren. Grid gibt uns dann nummerierte Linien, die wir beim Positionieren von Elementen verwenden können. In unserem dreispaltigen, zweireihigen Grid haben wir vier Spaltenlinien.
Linien werden entsprechend dem Schreibmodus des Dokuments nummeriert. In einer Sprache von links nach rechts befindet sich Linie 1 auf der linken Seite des Grids. In einer Sprache von rechts nach links befindet es sich auf der rechten Seite des Grids. Linien können auch benannt werden, was im Grid-Layout unter Verwendung benannter Grid-Linien Leitfaden diskutiert wird.
Platzieren von Elementen an Linien
Das folgende Beispiel zeigt eine grundlegende Linie-basierte Platzierung; beim Platzieren eines Elements zielen wir auf die Linie anstelle der Spur. Wir erkunden dies ausführlicher im Grid-Layout unter Verwendung von linienbasierter Platzierung Leitfaden.
In diesem Beispiel werden die ersten beiden Elemente in unserem dreispaltigen Spur-Grid mit den Eigenschaften grid-column-start, grid-column-end, grid-row-start und grid-row-end platziert. Von links nach rechts wird das erste Element an Spaltenlinie 1 platziert und erstreckt sich bis zur Spaltenlinie 4, die in unserem Fall die äußerste rechte Linie im Grid ist. Es beginnt an der Zeilenlinie 1 und endet an der Zeilenlinie 3, was bedeutet, dass es sich über zwei Spuren erstreckt.
Das zweite Element beginnt an der Spaltenlinie 1 des Grids und erstreckt sich über eine Spur. Dies ist die Standardeinstellung, daher müssen wir die Endlinie nicht angeben. Es erstreckt sich auch über zwei Zeilenspuren von der Zeilenlinie 3 bis zur Zeilenlinie 5. Die anderen Elemente werden sich in den leeren Raum auf dem Grid platzieren.
<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 an den Linien des Grids positioniert sind.
Linienpositionierungs-Kurzschreibweisen
Die oben verwendeten Langformwerte können für Spalten mit der grid-column Kurzschreibweise und für Reihen mit der grid-row Kurzschreibweise in eine Linie komprimiert werden. Das folgende Beispiel würde die gleiche Positionierung wie im vorherigen Code ergeben, jedoch mit wesentlich weniger CSS. Der Wert vor dem Schrägstrich (/) ist die Startlinie, der Wert danach die Endlinie.
Sie können den Endwert weglassen, wenn der Bereich nur eine Spur umfasst.
.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 auf einem Raster. Konzeptionell ist sie wie eine Tabellenzelle. Wie wir in unseren früheren Beispielen gesehen haben, werden einmal als übergeordnetes Element definierte Grid-Items jeweils in einer Zelle des definierten Grids angelegt. Im unten stehenden Bild ist die erste Zelle des Grids hervorgehoben.
Grid-Bereiche
Elemente können eine oder mehrere Zellen sowohl durch Reihen als auch durch Spalten überspannen, und dies erstellt einen Grid-Bereich. Grid-Bereiche müssen rechteckig sein – es ist zum Beispiel nicht möglich, einen L-förmigen Bereich zu erstellen. Der hervorgehobene Grid-Bereich erstreckt sich über zwei Reihen- und zwei Spalten-Spuren.
Zwischenräume
Zwischenräume oder Durchlässe zwischen Grid-Zellen können mit den Eigenschaften column-gap und row-gap, oder der Kurzschreibweise gap erstellt werden. Im unten stehenden Beispiel fügen wir eine 10-Pixel-Lücke zwischen den Spalten und eine 1em-Lücke zwischen den Reihen 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 durch Lücken verwendete Raum wird vor der Zuweisung des Raums an die flexible Länge der fr-Spuren berücksichtigt. Und Lücken verhalten sich für Größenzwecke wie eine reguläre Grid-Spur, jedoch können Sie nichts in eine Lücke platzieren. In Bezug auf die linienbasierte Positionierung verhält sich die Lücke wie eine dicke, transparente Linie.
Verschachtelung von Grids
Ein Grid-Item kann ein Grid-Container werden. Im folgenden Beispiel erweitern wir das zuvor gesehene dreispaltige Grid mit zwei platzierten Elementen, indem wir Unter-Elemente zum ersten Grid-Item hinzufügen. Da diese verschachtelten Elemente keine direkten Kinder des Grids sind, nehmen sie nicht an der Grid-Anordnung teil und werden daher im normalen Dokumentfluss angezeigt.
Verschachtelung ohne Subgrid
Wenn wir box1 auf display: grid setzen, können wir ihm eine Spurdefinition geben und es wird ebenfalls zu einem Grid. Die Elemente werden dann auf diesem neuen Grid angeordnet.
.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);
}
<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: 1 / 4;
}
.nested {
border: 2px solid #ffec99;
border-radius: 5px;
background-color: #fff9db;
padding: 1em;
}
In diesem Fall hat das verschachtelte Grid keine Beziehung zum Elternteil. Wie Sie in dem Beispiel sehen können, hat es den gap des Eltern-Gitters nicht geerbt, und die Linien im verschachtelten Grid stimmen nicht mit den Linien im Eltern-Grid überein.
Subgrid
Neben regulären Grids können wir ein Subgrid erstellen. Der subgrid-Wert ermöglicht es uns, verschachtelte Grids zu erstellen, die die Spurdefinition des Eltern-Grids verwenden.
Um sie zu verwenden, bearbeiten wir das oben genannte verschachtelte Grid-Beispiel, um die Spurdefinition von grid-template-columns: repeat(3, 1fr), zu grid-template-columns: subgrid zu ändern. Das verschachtelte Grid verwendet dann die Spurdefinition des Eltern-Grids, um die 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;
}
Überlagerung von Elementen mit z-index
Grid-Items können dieselbe Zelle belegen, und in diesem Fall können wir die Eigenschaft z-index verwenden, um die Reihenfolge zu kontrollieren, in der sich überlappende Elemente stapeln.
Überlagerung ohne z-index
Wenn wir zu unserem Beispiel mit durch Liniennummerierung positionierten Items zurückkehren, können wir dies ändern, um zwei Items zu überlagern.
<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 überlagert nun box1, es wird oben angezeigt, da es später in der Quellordnung kommt.
Kontrolle der Reihenfolge
Wir können die Reihenfolge, in der sich die Elemente stapeln, mit der z-index-Eigenschaft – ähnlich wie bei positionierten Items – kontrollieren. Wenn wir box2 einen niedrigeren z-index als box1 geben, wird er unter box1 im Stapel 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 dieser Übersicht haben wir einen sehr schnellen Blick auf die Möglichkeiten von Grid-Layouts geworfen. Erkunden und experimentieren Sie mit den Codebeispielen, und fahren Sie dann mit dem Leitfaden fort, Beziehung des Grid-Layouts zu anderen Layout-Methoden, in dem wir wirklich beginnen, in die Details des CSS-Grid-Layouts einzutauchen.