CSS-Grid-Layout

Ein Grid ist eine Menge sich schneidender horizontaler und vertikaler Linien, die die Spalten und Zeilen des Grids definieren.

CSS stellt ein rasterbasiertes Layoutsystem mit Zeilen und Spalten bereit, wodurch das Entwerfen von Webseiten erleichtert wird, ohne Floats und Positionierung verwenden zu müssen.

Das Folgende ist ein einfaches Webseiten-Layout, das Grid-Layout verwendet und sechs Spalten und drei Zeilen enthält:

Selbst ausprobieren »

Browser-Unterstützung

Derzeit unterstützen alle neuesten Browserversionen das Grid-Layout.


57.0	16.0	52.0	10	44

Grid-Element

Ein Grid-Layout besteht aus einem übergeordneten Element und einem oder mehreren untergeordneten Elementen.

Beispiel

Selbst ausprobieren »

display-Eigenschaft

Wenn ein HTML-Element seine display-Eigenschaft auf grid oder inline-grid setzt, wird es zu einem Grid-Container, und alle direkten Kindelemente dieses Elements werden zu Grid-Elementen.

Beispiel

.grid-container { display: grid; }

Selbst ausprobieren »

Beispiel

.grid-container { display: inline-grid; }

Selbst ausprobieren »

Grid-Spur

Wir verwendengrid-template-columnsundgrid-template-rowsEigenschaften, um Spalten und Zeilen im Grid zu definieren.

Diese Eigenschaften definieren die Spuren des Grids. Eine Grid-Spur ist der Raum zwischen zwei beliebigen Linien im Grid.

In der Abbildung unten sehen Sie eine Spur mit einer grünen Box – die erste Zeilenspur des Grids. Die zweite Zeile hat drei weiße Box-Spuren.

Im folgenden Beispiel verwenden wirgrid-template-columns. Die Eigenschaft erstellt vier Spalten im Grid-Container:

Beispiel

.grid-container { display: grid; grid-template-columns: auto auto auto auto; }

Selbst ausprobieren »

Im folgenden Beispiel verwenden wirgrid-template-rows. Die Eigenschaft legt die Höhe der Zeilen im Grid-Container fest:

Beispiel

.grid-container { display: grid; grid-template-rows: 100px 300px; }

Selbst ausprobieren »

fr-Einheit

Spuren können mit jeder Längeneinheit definiert werden.

Das Grid führtfr-Einheiten ein, um uns zu helfen, flexible Grid-Spuren zu erstellen. Eine fr-Einheit repräsentiert einen gleichen Anteil am verfügbaren Platz im Grid-Container.

Das folgende Beispiel definiert eine Grid-Definition, die drei gleich breite Spuren erstellt, die mit dem verfügbaren Platz wachsen und schrumpfen.

Beispiel

.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; }

Selbst ausprobieren »

Grid-Zelle

Eine Grid-Zelle ist die kleinste Einheit innerhalb eines Grid-Elements, konzeptionell vergleichbar mit einer Zelle in einer Tabelle. Wenn wir nun auf unser früheres Beispiel zurückblicken: Sobald ein Grid-Element innerhalb eines übergeordneten Elements definiert ist, werden seine untergeordneten Elemente in jeder vordefinierten Grid-Zelle angeordnet. Im folgenden Bild hebe ich die erste Grid-Zelle hervor.

Grid-Bereich

Grid-Elemente können sich über eine oder mehrere Zellen in Zeilen- oder Spaltenrichtung erstrecken und einen Grid-Bereich bilden. Die Form eines Grid-Bereichs sollte ein Rechteck sein – das heißt, Sie können keinen Grid-Bereich in Form eines "L" erstellen. Der hervorgehobene Grid-Bereich im folgenden Bild erstreckt sich über 2 Spalten und 2 Zeilen.

Grid-Spalten

Die vertikale Richtung von Grid-Elementen wird als Spalte bezeichnet.

Grid-Zeile

Die horizontale Richtung von Grid-Elementen wird als Zeile bezeichnet.

Grid-Abstand

Der Grid-Abstand (Spaltenabstand) bezeichnet den horizontalen oder vertikalen Abstand zwischen zwei Grid-Zellen.

Mit den folgenden Eigenschaften können Sie die Größe des Abstands anpassen:

grid-column-gap
grid-row-gap
grid-gap

Das folgende Beispiel verwendetgrid-column-gapEigenschaft, um den Grid-Abstand zwischen Spalten festzulegen:

Beispiel

.grid-container { display: grid; grid-column-gap: 50px; }

Selbst ausprobieren »

Das folgende Beispiel verwendetgrid-row-gapEigenschaft, um den Grid-Abstand zwischen Zeilen festzulegen:

Beispiel

.grid-container { display: grid; grid-row-gap: 50px; }

Selbst ausprobieren »

grid-gapDie Eigenschaft ist eine Kurzform für die Eigenschaften `grid-row-gap` und `grid-column-gap`:

Beispiel

.grid-container { display: grid; grid-gap: 50px 100px; }

Selbst ausprobieren »

grid-gapDie Eigenschaft kann sowohl den Zeilenabstand als auch den Spaltenabstand festlegen:

Beispiel

.grid-container { display: grid; grid-gap: 50px; }

Selbst ausprobieren »

Grid-Linie

Die Schnittpunkte zwischen Spalten und zwischen Zeilen werden als Grid-Linien bezeichnet.

Grid erstellt nummerierte Grid-Linien, damit wir jedes Grid-Element positionieren können.

Zum Beispiel gibt es im folgenden Grid mit drei Spalten und zwei Zeilen vier vertikale Grid-Linien (markiert durch graue Kreise) und drei horizontale Grid-Linien (markiert durch schwarze Kreise).

Grid-Elemente können auf diese Zeilennummern verweisen, wenn sie positioniert werden.

Das Bild unten definiert vier vertikale Gitterlinien und vier horizontale Gitterlinien:

Die Nummerierungsreihenfolge der Gitterlinien hängt vom Schreibmodus des Dokuments ab. In Sprachen, die von links nach rechts geschrieben werden, befindet sich Gitterlinie Nummer 1 ganz links. In Sprachen, die von rechts nach links geschrieben werden, befindet sich Gitterlinie Nummer 1 ganz rechts.

Als Nächstes habe ich die Eigenschaften `grid-column-start`, `grid-column-end`, `grid-row-start` und `grid-row-end` verwendet, um zu demonstrieren, wie Gitterlinien verwendet werden.

Im folgenden Beispiel legen wir die Gitterlinien eines Grid-Elements so fest, dass sie an der ersten Spalte beginnen und an der dritten Spalte enden:

Beispiel

.item1 { grid-column-start: 1; grid-column-end: 3; }

Selbst ausprobieren »

Im folgenden Beispiel legen wir die Gitterlinien eines Grid-Elements so fest, dass sie an der ersten Zeile beginnen und an der dritten Zeile enden:

Beispiel

.item1 { grid-row-start: 1; grid-row-end: 3; }

Selbst ausprobieren »

CSS-Grid-Eigenschaften

Eigenschaft	Beschreibung
column-gap	Gibt den Abstand zwischen Spalten an
gap	row-gapundcolumn-gapDie Kurzschreibweise von
grid	grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, undgrid-auto-flowDie Kurzschreibweise von
grid-area	Geben Sie den Namen des Grid-Elements an, oder es kann auchgrid-row-start, grid-column-start, grid-row-end, undgrid-column-end sein.Die Kurzschreibweise von
grid-auto-columns	Bezieht sich auf die Standardspaltengröße
grid-auto-flow	Geben Sie an, wie der Auto-Platzierungsalgorithmus funktioniert, und legen Sie genau fest, wie Elemente, die automatisch im Grid platziert werden, angeordnet werden.
grid-auto-rows	Bezieht sich auf die Standardzeilengröße
grid-column	grid-column-startundgrid-column-endDie Kurzschreibweise von
grid-column-end	Gibt die Endposition der Spalte des Grid-Elements an
grid-column-gap	Gibt die Abstandsgröße des Grid-Elements an
grid-column-start	Gibt die Startposition der Spalte des Grid-Elements an
grid-gap	grid-row-gapundgrid-column-gapDie Kurzschreibweise von
grid-row	grid-row-startundgrid-row-endDie Kurzschreibweise von
grid-row-end	Gibt die Endposition der Zeile des Grid-Elements an
grid-row-gap	Gibt den Zeilenabstand des Grid-Elements an
grid-row-start	Gibt die Startposition der Zeile des Grid-Elements an
grid-template	grid-template-rows, grid-template-columnsundgrid-areasDie Kurzschreibweise von
grid-template-areas	Gibt an, wie Zeilen und Spalten mithilfe benannter Grid-Elemente angezeigt werden.
grid-template-columns	Gibt die Größe der Spalten sowie die Anzahl der im Grid-Layout festgelegten Spalten an.
grid-template-rows	Gibt die Größe der Zeilen im Grid-Layout an
row-gap	Gibt den Abstand zwischen zwei Zeilen an

Als Nächstes können wirCSS Grid Layout Mini-Gameverwenden, um zu testen, was wir gelernt haben.

Weitere Erweiterungen