CSS-Grid-Layout

Ein Grid ist eine Sammlung von horizontalen und vertikalen Linien, die ein Muster erzeugen, an dem wir unsere Designelemente ausrichten können. Sie helfen uns dabei, Layouts zu erstellen, bei denen unsere Elemente nicht herumspringen oder ihre Breite ändern, während wir von Seite zu Seite wechseln, was für größere Konsistenz auf unseren Websites sorgt.

Ein Grid hat typischerweise Spalten, Reihen und dann Abstände zwischen jeder Reihe und Spalte. Diese Abstände werden allgemein als Rinnen bezeichnet.

Nachdem Sie sich für das Grid entschieden haben, das Ihr Design benötigt, können Sie das CSS-Grid-Layout verwenden, um es zu erstellen. Wir werden zunächst die grundlegenden Funktionen von Grid-Layout betrachten und dann untersuchen, wie Sie ein einfaches Gridsystem für Ihr Projekt erstellen.

Das folgende Video bietet eine schöne visuelle Erklärung zur Verwendung von CSS-Grid:

Lassen Sie uns Grid-Layouts ausprobieren. Hier ist ein Beispiel mit einem Container, der einige Kind-Elemente enthält. Standardmäßig werden diese Elemente im normalen Fluss angezeigt, was dazu führt, dass sie untereinander erscheinen.

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

body {
  font-family: sans-serif;
}
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
}

Ähnlich wie Sie Flexbox definieren, definieren Sie ein Grid-Layout, indem Sie den Wert der display-Eigenschaft auf grid setzen. Wie im Fall von Flexbox transformiert die display: grid-Eigenschaft alle direkten Kinder des Containers in Grid-Elemente. Wir haben die folgende CSS zum Dokument hinzugefügt:

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

body {
  font-family: sans-serif;
}
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
}

.container {
  display: grid;
}

Im Gegensatz zu Flexbox werden die Elemente nicht sofort anders aussehen. Die Deklarierung von display: grid gibt Ihnen ein Ein-Spalten-Grid, sodass Ihre Elemente weiterhin untereinander angezeigt werden, wie sie es im normalen Fluss tun.

Um etwas Grid-Ähnliches zu sehen, müssen wir dem Grid einige Spalten hinzufügen. Lassen Sie uns drei 200-Pixel-Spalten hinzufügen. Sie können jede Längeneinheit oder Prozentzahl verwenden, um diese Spaltenstränge zu erstellen.

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

body {
  font-family: sans-serif;
}
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
}

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Sie sollten sehen, dass sich die Elemente so neu arrangiert haben, dass sich jeweils eines in jeder Zelle des Grids befindet.

Zusätzlich zur Erstellung von Grids mit Längen und Prozentsätzen können wir fr verwenden. Die fr-Einheit stellt einen Bruchteil des verfügbaren Raums im Grid-Container dar und dient dazu, Grid-Reihen und -Spalten flexibel zu gestalten.

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

body {
  font-family: sans-serif;
}
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
}

Hier ändern wir die Track-Auflistung zu der folgenden Definition und erstellen drei 1fr-Tracks:

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

Jetzt haben Sie flexible Tracks. Die fr-Einheit verteilt den Raum proportional, sodass Sie unterschiedliche positive Werte für Ihre Tracks angeben können. Ändern Sie Ihre Track-Auflistung zur folgenden Definition, die einen 2fr-Track und zwei 1fr-Tracks erstellt:

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

body {
  font-family: sans-serif;
}
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
}

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

Der erste Track erhält 2fr des verfügbaren Raums und die anderen zwei Tracks erhalten 1fr, wodurch der erste Track größer wird. Sie können fr-Einheiten mit Einheiten fester Länge mischen. In diesem Fall wird der benötigte Raum für die festen Tracks zuerst verwendet, bevor der verbleibende Raum auf die anderen Tracks verteilt wird.

Um Abstände zwischen Tracks zu erstellen, verwenden wir die Eigenschaften:

• column-gap für Abstände zwischen Spalten
• row-gap für Abstände zwischen Reihen
• gap als Kurzform für beide

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

body {
  font-family: sans-serif;
}
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
}

Hier fügen wir die gap-Eigenschaft hinzu, um Abstände zwischen den Tracks mit einem Wert von 20px zu erstellen:

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 20px;
}

Diese Abstände können jede Längeneinheit oder Prozentzahl sein, aber nicht eine fr-Einheit.

Sie können die gesamte oder nur einen Teil Ihrer Track-Auflistung mit der CSS-Funktion repeat() wiederholen. Hier ändern wir die Track-Auflistung zu der folgenden:

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

body {
  font-family: sans-serif;
}
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Sie erhalten jetzt drei 1fr-Tracks wie zuvor. Der erste Wert, der an die repeat()-Funktion übergeben wird, gibt an, wie oft Sie die Auflistung wiederholen möchten, während der zweite Wert eine Track-Auflistung ist, die ein oder mehrere Tracks enthalten kann, die Sie wiederholen möchten.

Bis zu diesem Punkt haben wir nur Spaltenstränge spezifiziert, aber Reihen werden automatisch erstellt, um den Inhalt zu halten. Dieses Konzept hebt den Unterschied zwischen expliziten und impliziten Grids hervor. Hier ist ein bisschen mehr über den Unterschied zwischen den beiden Grid-Typen:

• Ein explizites Grid wird mit grid-template-columns oder grid-template-rows erstellt.
• Ein implizites Grid erweitert das definierte explizite Grid, wenn Inhalte außerhalb dieses Grids platziert werden, beispielsweise in den Reihen durch das Zeichnen zusätzlicher Grid-Linien.

Standardmäßig werden in einem impliziten Grid angelegte Stränge automatisch bemessen, was im Allgemeinen bedeutet, dass sie groß genug sind, um ihren Inhalt zu enthalten. Wenn Sie impliziten Grid-Strängen eine Größe zuweisen möchten, können Sie die Eigenschaften grid-auto-rows und grid-auto-columns verwenden. Wenn Sie grid-auto-rows mit einem Wert von 100px zu Ihrer CSS hinzufügen, werden Sie sehen, dass diese erstellen Reihen jetzt 100 Pixel hoch sind.

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

body {
  font-family: sans-serif;
}
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  gap: 20px;
}

Unsere 100 Pixel hohen Stränge werden nicht sehr nützlich sein, wenn wir Inhalte in diese Stränge einfügen, die höher als 100 Pixel sind, was dann zu einem Überlauf führen würde. Es könnte besser sein, Stränge zu haben, die mindestens 100 Pixel hoch sind, sich aber trotzdem erweitern können, wenn mehr Inhalt hinzugefügt wird. Eine ziemlich grundlegende Tatsache über das Web ist, dass man nie wirklich weiß, wie hoch etwas sein wird — zusätzlicher Inhalt oder größere Schriftgrößen können bei Designs Probleme verursachen, die versuchen, in jeder Dimension pixelgenau zu sein.

Die minmax()-Funktion ermöglicht es uns, eine minimale und maximale Größe für einen Track festzulegen, zum Beispiel minmax(100px, auto). Die Mindestgröße beträgt 100 Pixel, aber das Maximum ist auto, was sich erweitern wird, um mehr Inhalt aufzunehmen. Hier ändern wir die grid-auto-rows, um einen minmax()-Wert zu verwenden:

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four<br />More content</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

body {
  font-family: sans-serif;
}
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(50px, auto);
  gap: 20px;
}

Wenn Sie zusätzlichen Inhalt hinzufügen, werden Sie sehen, dass sich der Track erweitert, um ihn aufzunehmen. Beachten Sie, dass die Erweiterung direkt entlang der Reihe erfolgt.

Wir können einige der Lektionen, die wir über die Track-Auflistung gelernt haben, die Wiederholungsnotierung und minmax() kombinieren, um ein nützliches Muster zu erstellen. Manchmal ist es hilfreich, in der Lage zu sein, das Grid zu bitten, so viele Spalten zu erstellen, wie in den Container passen. Wir tun dies, indem wir den Wert von grid-template-columns mit der repeat()-Funktion festlegen, aber anstatt eine Nummer zu übergeben, übergeben wir das Schlüsselwort auto-fit. Für den zweiten Parameter der Funktion verwenden wir minmax() mit einem Mindestwert gleich der minimalen Trackgröße, die wir haben möchten, und einem Maximum von 1fr.

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four<br />More content</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

body {
  font-family: sans-serif;
}
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  grid-auto-rows: minmax(50px, auto);
  gap: 20px;
}

Dies funktioniert, weil das Grid so viele 230-Pixel-Spalten erstellt, wie in den Container passen, und dann den verbleibenden Raum auf alle Spalten verteilt. Das Maximum ist 1fr, das, wie wir bereits wissen, den Raum gleichmäßig zwischen den Tracks verteilt.

Jetzt gehen wir vom Erstellen eines Grids zur Platzierung von Dingen im Grid über. Unser Grid hat immer Linien — diese sind nummeriert, beginnend mit 1, und beziehen sich auf den Schreibrichtung-Modus des Dokuments. Zum Beispiel würde die Spaltenlinie 1 in Englisch (von links nach rechts geschrieben) auf der linken Seite des Grids sein und die Reihenlinie 1 oben, während in Arabisch (von rechts nach links geschrieben), die Spaltenlinie 1 auf der rechten Seite wäre.

Um Elemente entlang dieser Linien zu positionieren, können wir die Start- und Endlinien des Grid-Bereichs, in dem ein Element platziert werden soll, angeben. Es gibt vier Eigenschaften, die wir verwenden können, um dies zu tun:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

Diese Eigenschaften akzeptieren Liniennummern als ihre Werte, sodass wir zum Beispiel angeben können, dass ein Element auf Linie 1 beginnen und auf Linie 3 enden soll. Alternativ können Sie auch Kurzform-Eigenschaften verwenden, die es Ihnen ermöglichen, die Start- und Endlinien gleichzeitig anzugeben, getrennt durch einen Schrägstrich /:

• grid-column Kurzform für grid-column-start und grid-column-end
• grid-row Kurzform für grid-row-start und grid-row-end

<div class="container">
  <header>Header</header>
  <main>
    <h1>Main</h1>
    <p>Main content…</p>
  </main>
  <aside>
    <h2>Aside</h2>
    <p>Related content</p>
  </aside>
  <footer>footer</footer>
</div>

.container {
  font-family: sans-serif;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}
header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rebeccapurple;
  color: whitesmoke;
  text-align: center;
}
aside {
  border-right: 1px solid rebeccapurple;
}

Ohne die definierte Platzierung können Sie sehen, dass automatische Platzierung jedes Element in seiner eigenen Zelle im Grid platziert. Der <header> nimmt 1fr (ein Viertel) ein und die <main> nimmt 3fr (drei Viertel) ein.

Lassen Sie uns alle Elemente unserer Seite mit den Grid-Linien arrangieren. Fügen Sie die folgenden Regeln am Ende Ihrer CSS hinzu:

<div class="container">
  <header>Header</header>
  <main>
    <h1>Main</h1>
    <p>Main content…</p>
  </main>
  <aside>
    <h2>Aside</h2>
    <p>Related content</p>
  </aside>
  <footer>footer</footer>
</div>

.container {
  font-family: sans-serif;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}
header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rebeccapurple;
  color: whitesmoke;
  text-align: center;
}
aside {
  border-right: 1px solid rebeccapurple;
}

header {
  grid-column: 1 / 3;
  grid-row: 1;
}
main {
  grid-column: 2;
  grid-row: 2;
}
aside {
  grid-column: 1;
  grid-row: 2;
}
footer {
  grid-column: 1 / 3;
  grid-row: 3;
}

Jetzt sind der <header> und <footer> auf 1 / 3 eingestellt, was bedeutet, dass sie bei Linie 1 beginnen und bei Linie 3 enden.

Eine alternative Möglichkeit, Elemente auf Ihrem Grid anzuordnen, besteht darin, die Eigenschaft grid-template-areas zu verwenden und den verschiedenen Elementen Ihres Designs einen Namen zu geben.

<div class="container">
  <header>Header</header>
  <main>
    <h1>Main</h1>
    <p>Main content…</p>
  </main>
  <aside>
    <h2>Aside</h2>
    <p>Related content</p>
  </aside>
  <footer>footer</footer>
</div>

.container {
  font-family: sans-serif;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}
header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rebeccapurple;
  color: whitesmoke;
  text-align: center;
}
aside {
  border-right: 1px solid rebeccapurple;
}

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}
header {
  grid-area: header;
}
main {
  grid-area: content;
}
aside {
  grid-area: sidebar;
}
footer {
  grid-area: footer;
}

Hier verwenden wir die Eigenschaft grid-template-areas, um zu definieren, wie die 3 Reihen layoutiert sind. Die erste Reihe hat einen Wert von header header, die zweite sidebar content und die dritte footer footer. Wir verwenden dann die Eigenschaft grid-area, um zu definieren, wo Elemente in den grid-template-areas platziert werden.

Die Regeln für grid-template-areas lauten wie folgt:

• Sie müssen jede Zelle des Grids ausfüllen.
• Um sich über zwei Zellen zu erstrecken, wiederholen Sie den Namen.
• Um eine Zelle leer zu lassen, verwenden Sie einen . (Punkt).
• Bereiche müssen rechteckig sein — zum Beispiel kann man keinen L-förmigen Bereich haben.
• Bereiche können nicht an verschiedenen Stellen wiederholt werden.

Sie können mit unserem Layout herumspielen, indem Sie den Footer ändern, sodass er nur unter dem Artikel sitzt, und die Sidebar so anpassen, dass sie sich bis ganz nach unten erstreckt. Dies ist eine sehr schöne Möglichkeit, ein Layout zu beschreiben, da es allein durch den Blick auf das CSS klar ist, was genau passiert.

Es ist möglich, ein Grid in ein anderes zu verschachteln und damit ein "Subgrid" zu erstellen. Sie können dies tun, indem Sie die Eigenschaft display: grid auf ein Element im übergeordneten Grid anwenden.

Lassen Sie uns das vorherige Beispiel erweitern, indem wir einen Container für Artikel hinzufügen und ein verschachteltes Grid verwenden, um das Layout mehrerer Artikel zu steuern. Auch wenn wir im verschachtelten Grid nur eine Spalte verwenden, können wir die Reihen mit der Eigenschaft grid-template-rows in ein Verhältnis von 4:3:3 teilen. Dieser Ansatz ermöglicht es uns, ein Layout zu erstellen, bei dem ein Artikel oben auf der Seite eine große Darstellung hat, während die anderen kleinere, vorschauähnliche Layouts haben.

<div class="container">
  <header>Header</header>
  <main>
    <article>
      <h1>Article one</h1>
      <p>Content…</p>
    </article>
    <article>
      <h1>Article two</h1>
      <p>Content…</p>
    </article>
    <article>
      <h1>Article three</h1>
      <p>Content…</p>
    </article>
  </main>
  <aside>
    <h2>Aside</h2>
    <p>Related content</p>
  </aside>
  <footer>footer</footer>
</div>

.container {
  font-family: sans-serif;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}
header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rebeccapurple;
  color: whitesmoke;
  text-align: center;
}
header {
  grid-area: header;
}
aside {
  border-right: 1px solid rebeccapurple;
  grid-area: sidebar;
}
footer {
  grid-area: footer;
}
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}

main {
  grid-area: content;
  display: grid;
  grid-template-rows: 4fr 3fr 3fr;
  gap: inherit;
}
article {
  padding: 10px;
  border: 2px solid rebeccapurple;
  border-radius: 5px;
}

Um die Arbeit mit Layouts in verschachtelten Grids zu erleichtern, können Sie subgrid auf den Eigenschaften grid-template-rows und grid-template-columns verwenden. Dies ermöglicht es Ihnen, die im übergeordneten Grid definierten Tracks zu nutzen.

Im folgenden Beispiel verwenden wir die linienbasierte Platzierung, das es dem verschachtelten Grid ermöglicht, mehrere Spalten und Reihen des übergeordneten Grids zu überspannen. Wir haben subgrid hinzugefügt, um die Spaltentracks des übergeordneten Grids zu erben, während wir ein anderes Layout für die Reihen innerhalb des verschachtelten Grids hinzufügen.

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div class="subgrid">
    <div>Five</div>
    <div>Six</div>
    <div>Seven</div>
    <div>Eight</div>
  </div>
  <div>Nine</div>
  <div>Ten</div>
</div>

.container {
  font-family: sans-serif;
}
.container div {
  border-radius: 5px;
  padding: 10px;
  background-color: rebeccapurple;
  border: 1px solid white;
  color: white;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 10px;
}
.subgrid {
  grid-column: 1 / 4;
  grid-row: 2 / 4;
  display: grid;
  gap: inherit;
  grid-template-columns: subgrid;
  grid-template-rows: 2fr 1fr;
}

Zahlreiche Grid-Frameworks sind verfügbar, die ein 12- oder 16-Spalten-Grid bieten, um bei der Layoutgestaltung Ihrer Inhalte zu helfen. Die gute Nachricht ist, dass Sie wahrscheinlich keine Drittanbieter-Frameworks benötigen, um grid-basierte Layouts zu erstellen — die Grid-Funktionalität ist bereits in der Spezifikation enthalten und wird von den meisten modernen Browsern unterstützt.

Dies hat einen Container mit einem 12-Spalten-Grid definiert, unter Verwendung von grid-template-columns: repeat(12, 1fr);, und dasselbe Markup, das wir in den vorherigen zwei Beispielen verwendet haben. Jetzt können wir die linienbasierte Platzierung verwenden, um unsere Inhalte im 12-Spalten-Grid zu platzieren.

<div class="container">
  <header>Header</header>
  <main>
    <h1>Main</h1>
    <p>Main content…</p>
  </main>
  <aside>
    <h2>Aside</h2>
    <p>Related content</p>
  </aside>
  <footer>footer</footer>
</div>

.container {
  font-family: sans-serif;
}

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rebeccapurple;
  color: whitesmoke;
  text-align: center;
}
aside {
  border-right: 1px solid rebeccapurple;
}

.container {
  font-family: sans-serif;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
header {
  grid-column: 1 / 13;
  grid-row: 1;
}
main {
  grid-column: 4 / 13;
  grid-row: 2;
}
aside {
  grid-column: 1 / 4;
  grid-row: 2;
}
footer {
  grid-column: 1 / 13;
  grid-row: 3;
}

Wenn Sie den Firefox-Grid-Inspektor verwenden, um die Grid-Linien auf Ihrem Design zu überlagern, können Sie sehen, wie unser 12-Spalten-Grid funktioniert.

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen gespeichert haben, bevor Sie weitermachen — siehe Testen Sie Ihr Können: Grid.

In dieser Übersicht haben wir die Hauptfunktionen des CSS-Grid-Layouts beleuchtet. Sie sollten in der Lage sein, es in Ihren Designs zu verwenden. Als nächstes werden wir uns mit dem responsiven Design beschäftigen.

CSS Grid layout

Hauptseite des CSS Grid Layout Moduls mit vielen weiteren Ressourcen

A complete guide to CSS grid

Ein visueller Leitfaden auf CSS-Tricks (2023).

Grid Garden

Ein lehrreiches Spiel, um die Grundlagen von Grid auf cssgridgarden.com zu lernen und besser zu verstehen.

• Zurück
• Übersicht: CSS-Layout
• Weiter