CSS Grid-Layout

Was ist 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, Layouts zu erstellen, in denen unsere Elemente nicht springen oder die Breite ändern, wenn wir von Seite zu Seite wechseln, wodurch die Konsistenz auf unseren Websites verbessert wird.

Ein Grid besteht typischerweise aus Spalten, Zeilen und dann Lücken zwischen jeder Zeile und Spalte. Die Lücken werden häufig als Abstände bezeichnet.

Ihr Grid in CSS erstellen

Nachdem Sie sich entschieden haben, welches Grid Ihr Design benötigt, können Sie CSS Grid-Layout verwenden, um es zu erstellen. Wir werden zunächst die grundlegenden Funktionen des Grid-Layouts untersuchen und dann erkunden, wie man ein einfaches Grid-System für Ihr Projekt erstellt. Das folgende Video bietet eine anschauliche Erklärung zur Verwendung von CSS Grid:

Ein Grid definieren

Probieren wir Grid-Layouts aus. Hier ist ein Beispiel mit einem Container, der einige Kind-Elemente enthält. Standardmäßig werden diese Elemente im normalen Fluss angezeigt, wodurch 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 bei der Definition von Flexbox definieren Sie ein Grid-Layout, indem Sie den Wert der display-Eigenschaft auf grid setzen. Wie im Fall von Flexbox transformiert die Eigenschaft display: grid 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 sehen die Elemente nicht sofort anders aus. Die Deklaration 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ähnlicheres zu sehen, müssen wir dem Grid einige Spalten hinzufügen. Fügen wir drei 200-Pixel-Spalten hinzu. Sie können jede Längeneinheit oder Prozentsätze verwenden, um diese Spaltentracks 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 umgeordnet haben, dass jeweils eines in jeder Zelle des Grids liegt.

Interaktive Wiederholung der Grid-Konzepte

Der folgende eingebettete Inhalt von Scrimba^{MDN Lernpartner} bietet eine interaktive Lektion über die Grundlagen von CSS Grid. Sie enthält auch ein Live-Grid-Beispiel, mit dem Sie experimentieren können, um zu sehen, wie der Code funktioniert.

Flexible Grids mit der Einheit fr

Zusätzlich zum Erstellen von Grids mit Längen und Prozentsätzen können wir fr verwenden. Die fr-Einheit repräsentiert einen Bruchteil des verfügbaren Platzes im Grid-Container, um Grid-Zeilen und -Spalten flexibel zu dimensionieren.

<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-Liste zu folgender Definition, die drei 1fr Tracks erstellt:

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

Sie haben nun 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-Liste zu folgender Definition, um einen 2fr Track und zwei 1fr Tracks 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: 2fr 1fr 1fr;
}

Der erste Track erhält 2fr des verfügbaren Platzes und die anderen beiden Tracks erhalten 1fr, sodass der erste Track größer ist. Sie können fr-Einheiten mit festen Längeneinheiten mischen. In diesem Fall wird zuerst der Platz für die festen Tracks verwendet, bevor der verbleibende Platz auf die anderen Tracks verteilt wird.

Lücken zwischen Tracks

Um Lücken zwischen Tracks zu erstellen, verwenden wir die Eigenschaften:

• column-gap für Lücken zwischen Spalten
• row-gap für Lücken zwischen Zeilen
• gap als Kurzform für beides

<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 Lücken zwischen den Tracks mit einem Wert von 20px zu erstellen:

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

Diese Lücken können jede Längeneinheit oder Prozentsatz sein, jedoch keine fr-Einheit.

Wiederholende Track-Liste

Sie können Ihre gesamte Track-Liste oder nur einen Abschnitt davon mit der CSS-Funktion repeat() wiederholen. Hier ändern wir die Track-Liste zu folgender Definition:

<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;
}

Jetzt erhalten Sie drei 1fr Tracks genau wie zuvor. Der erste Wert, der an die repeat()-Funktion übergeben wird, gibt an, wie oft die Liste wiederholt werden soll, während der zweite Wert eine Track-Liste ist, die aus einem oder mehreren Tracks bestehen kann, die Sie wiederholen möchten.

Implizite und explizite Grids

Bis zu diesem Punkt haben wir nur Spaltentracks angegeben, aber Zeilen werden automatisch erstellt, um den Inhalt aufzunehmen. Dieses Konzept unterstreicht den Unterschied zwischen expliziten und impliziten Grids. Hier ist ein bisschen mehr über den Unterschied zwischen diesen beiden Arten von Grids:

• Explizites Grid wird mit grid-template-columns oder grid-template-rows erstellt.
• Implizites Grid erweitert das definierte explizite Grid, wenn Inhalte außerhalb dieses Grids platziert werden, z.B. in die Zeilen durch Ziehen zusätzlicher Gitternetzlinien.

Standardmäßig sind Tracks, die im impliziten Grid erstellt werden, auto-dimensioniert, was im Allgemeinen bedeutet, dass sie groß genug sind, um ihren Inhalt aufzunehmen. Wenn Sie explizite Grid-Tracks eine Größe geben möchten, können Sie die Eigenschaften grid-auto-rows und grid-auto-columns verwenden. Fügen Sie grid-auto-rows mit einem Wert von 100px zu Ihrem CSS hinzu, werden Sie sehen, dass die erstellten Zeilen 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;
}

Die minmax()-Funktion

Unsere 100-Pixel-hohen Tracks werden nicht sehr nützlich sein, wenn wir Inhalte hinzufügen, die höher als 100 Pixel sind, was zu einem Überlauf führen würde. Es könnte besser sein, Tracks zu haben, die mindestens 100 Pixel hoch sind und sich dennoch 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 Probleme mit Designs verursachen, die versuchen, pixelgenau in jeder Dimension zu sein.

Die minmax()-Funktion ermöglicht es uns, eine Mindest- und Höchstgröße für einen Track festzulegen, zum Beispiel minmax(100px, auto). Die Mindestgröße beträgt 100 Pixel, aber die Höchstgröße ist auto, was sich anpasst, um mehr Inhalt unterzubringen. 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, sehen Sie, dass sich der Track erweitert, um ihn aufzunehmen. Beachten Sie, dass die Erweiterung entlang der Zeile erfolgt.

So viele Spalten wie passen

Wir können einige der Lektionen, die wir über die Track-Liste gelernt haben, die Wiederholungsnotation und minmax() kombinieren, um ein nützliches Muster zu erstellen. Manchmal ist es hilfreich, CSS Grid so zu konfigurieren, dass es so viele Spalten erstellt, wie in den Container passen. Wir tun dies, indem wir den Wert von grid-template-columns mit der repeat()-Funktion festlegen, aber anstatt eine Zahl zu übergeben, verwenden wir das Schlüsselwort auto-fit. Für den zweiten Parameter der Funktion verwenden wir minmax() mit einem Mindestwert, der der minimalen Track-Größe entspricht, 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 wie in den Container passen erstellt und dann den verbleibenden Raum gleichmäßig auf alle Spalten verteilt. Das Maximum ist 1fr, das, wie wir bereits wissen, den Platz gleichmäßig zwischen Tracks verteilt.

Linienbasierte Platzierung

Jetzt gehen wir vom Erstellen eines Grids zur Platzierung von Dingen im Grid über. Unser Grid hat immer Linien — diese werden beginnend mit 1 nummeriert und beziehen sich auf den Schreibmodus des Dokuments. Beispielsweise wäre die Spaltenlinie 1 im Englischen (links-nach-rechts geschrieben) auf der linken Seite des Grids und die Zeilenlinie 1 oben, während im Arabischen (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 Bereichs angeben, in dem ein Element platziert werden soll. 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 Werte, sodass wir angeben können, dass ein Element beispielsweise auf der Linie 1 starten und auf der Linie 3 enden soll. Alternativ können Sie auch Kurzformeigenschaften 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 definierte Platzierung können Sie sehen, dass Auto-Platzierung jedes Element in seine eigene Zelle im Grid platziert. Der <header> belegt 1fr (ein Viertel) und der <main> belegt 3fr (drei Viertel).

Ordnen wir alle Elemente für unsere Website mit den Grid-Linien an. Fügen Sie die folgenden Regeln zu Ihrem CSS am Ende 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 der <footer> auf 1 / 3 gesetzt, was bedeutet, dass sie auf der Linie 1 beginnen und auf der Linie 3 enden.

Positionierung mit grid-template-areas

Eine alternative Möglichkeit, Elemente auf Ihrem Grid anzuordnen, ist die Verwendung der grid-template-areas-Eigenschaft, um 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 grid-template-areas-Eigenschaft, um zu definieren, wie die drei Reihen angeordnet sind. Die erste Reihe hat den Wert header header, die zweite sidebar content und die dritte footer footer. Wir verwenden dann die grid-area-Eigenschaft, um zu definieren, wo Elemente in den grid-template-areas platziert werden.

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

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

Sie können mit unserem Layout experimentieren, indem Sie z. B. das Footer so ändern, dass es nur unter dem Artikel steht und die Sidebar sich ganz nach unten erstreckt. Dies ist eine sehr angenehme Methode, ein Layout zu beschreiben, da es allein durch Betrachtung der CSS sofort klar ist, was geschieht.

Verschachteln von Grids und Subgrid

Es ist möglich, ein Grid innerhalb eines anderen Grids zu verschachteln, wodurch ein "Subgrid" entsteht. Sie können dies tun, indem Sie die Eigenschaft display: grid auf ein Element des übergeordneten Grids 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. Während wir nur eine Spalte im verschachtelten Grid verwenden, können wir die Zeilen definieren, um im Verhältnis 4:3:3 geteilt zu werden, indem wir die grid-template-rows-Eigenschaft verwenden. Dieser Ansatz ermöglicht es uns, ein Layout zu erstellen, in dem ein Artikel oben auf der Seite eine große Anzeige hat, während die anderen ein kleineres, Vorschaulayout 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 einfacher mit Layouts in verschachtelten Grids zu arbeiten, können Sie subgrid auf den Eigenschaften grid-template-rows und grid-template-columns verwenden. Dadurch können Sie die in dem übergeordneten Grid definierten Tracks nutzen.

Im folgenden Beispiel verwenden wir die linienbasierte Platzierung, die es dem verschachtelten Grid ermöglicht, sich über mehrere Spalten und Zeilen des übergeordneten Grids zu erstrecken. Wir haben subgrid hinzugefügt, um die Spaltentracks des übergeordneten Grids zu übernehmen, während wir ein anderes Layout für die Zeilen 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;
}

Grid-Frameworks

Es gibt zahlreiche Grid-Frameworks — diese sind vorgefertigte CSS-Systeme, die Merkmale wie 12- oder 16-Spalten-Grids, Utility-Klassen für Abstände und Ausrichtung sowie ein responsives Design über Breakpoints bieten.

Die gute Nachricht ist, dass Sie wahrscheinlich keine proprietären Workarounds brauchen werden, um gridbasierte Layouts zu erstellen — alle modernen Browser unterstützen den CSS-Grid-Standard.

Das folgende Beispiel zeigt eine vereinfachte Version von dem, was solcher Code enthalten könnte. Es zeigt einen Container mit einem 12-Spalten-Grid, das durch grid-template-columns: repeat(12, 1fr); definiert ist, und die gleiche Markup, die wir in den vorherigen zwei Beispielen verwendet haben. Wir können nun die linienbasierte Platzierung verwenden, um unseren Inhalt auf dem 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 Inspector verwenden, um die Grid-Linien auf Ihrem Design zu überlagern, können Sie sehen, wie unser 12-Spalten-Grid funktioniert.

![Ein Layout mit einem 12-Spalten-Grid über unser Design.] (learn-grids-inspector.png)

Zusammenfassung

In diesem Überblick haben wir die Hauptmerkmale des CSS Grid-Layouts besprochen. Sie sollten in der Lage sein, es in Ihren Designs zu verwenden.

Im nächsten Artikel geben wir Ihnen einige Tests, mit denen Sie überprüfen können, wie gut Sie alle diese Informationen verstanden und behalten haben.

Siehe auch

CSS-Grid-Layout

Die Hauptseite des CSS Grid Fit Layout Moduls, die viele weitere Ressourcen enthält.

CSS Grid Layout Guide

Ein visueller Leitfaden auf CSS-Tricks (2021).

Grid Garden

Ein edukatives Spiel, um die Grundlagen des Grids auf cssgridgarden.com besser zu verstehen.

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