CSS-Grid-Layout

Das CSS-Grid-Layout ist ein zweidimensionales Layout-System für das Web. Es ermöglicht Ihnen, Inhalte in Zeilen und Spalten zu organisieren und bietet viele Funktionen, um die Erstellung komplexer Layouts zu vereinfachen. Dieser Artikel erklärt alles, was Sie wissen müssen, um mit dem Grid-Layout zu beginnen.

Voraussetzungen:	Strukturierung von Inhalten mit HTML, CSS-Styling-Grundlagen, Grundlegende Text- und Schriftstile, Vertrautheit mit Grundkonzepten des CSS-Layouts.
Lernziele:	Zweck des CSS-Grids verstehen — flexible Anordnung von Block- oder Inline-Elementen in zwei Dimensionen. Grid-Terminologie verstehen — Zeilen, Spalten, Lücken und Rinnen. Verstehen, was `display: grid` standardmäßig bietet. Definition von Grid-Zeilen, -Spalten und -Lücken. Positionierung von Elementen im Grid.

Was ist ein Grid-Layout?

Ein Grid ist eine Anordnung horizontaler und vertikaler Linien, die ein Muster bilden, an dem wir unsere Designelemente ausrichten können. Sie helfen uns, Layouts zu erstellen, in denen unsere Elemente nicht herumspringen oder ihre Breite ändern, wenn wir von Seite zu Seite wechseln, was für eine größere Konsistenz auf unseren Websites sorgt.

Ein Grid hat typischerweise Spalten, Zeilen und dann Lücken zwischen jeder Zeile und Spalte. Die Lücken werden allgemein als Rinnen bezeichnet.

CSS-Grid mit Teilen, die als Zeilen, Spalten und Rinnen beschrieben sind. Zeilen sind die horizontalen Segmente des Grids und Spalten sind die vertikalen Segmente. Der Raum zwischen zwei Zeilen wird als 'Zeilenrinnen' und der Raum zwischen zwei Spalten als 'Spaltenrinnen' bezeichnet.

Erstellung Ihres Grids in CSS

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 des Grid-Layouts betrachten und dann erkunden, wie Sie ein einfaches Grid-System für Ihr Projekt erstellen können. Das folgende Video bietet eine schöne visuelle Erklärung der Verwendung von CSS-Grid:

Definition eines Grids

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

html

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

css

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 verwandelt die display: grid-Eigenschaft alle direkten Kinder des Containers in Grid-Items. Wir haben dem Dokument die folgende CSS 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);
}

css

.container {
  display: grid;
}

Im Gegensatz zu Flexbox werden die Elemente nicht sofort anders aussehen. Die Deklaration von display: grid gibt Ihnen ein einspaltiges Grid, sodass Ihre Elemente weiterhin wie im normalen Fluss untereinander angezeigt werden.

Um etwas zu sehen, das grid-ähnlicher aussieht, müssen wir einige Spalten zum Grid hinzufügen. Lassen Sie uns drei 200-Pixel-Spalten hinzufügen. Sie können jede beliebige 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);
}

css

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

Sie sollten sehen, dass sich die Elemente so umorganisiert haben, dass sich in jeder Zelle des Grids ein Element befindet.

Flexible Grids mit der fr-Einheit

Zusätzlich zur Erstellung von Grids mit Längen und Prozentsätzen können wir fr verwenden. Die fr-Einheit repräsentiert einen Bruchteil des verfügbaren Raums 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-Auflistung auf die folgende Definition, die drei 1fr-Tracks erstellt:

css

.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 auf die folgende 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);
}

css

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

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

Hinweis: Die fr-Einheit verteilt den verfügbaren Raum, nicht den ganzen Raum. Daher wird es, wenn einer Ihrer Tracks etwas Großes darin hat, weniger freien Platz zum Teilen geben.

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 Abkürzung 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:

css

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

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

Wiederholte Track-Auflistungen

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

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

css

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

Jetzt erhalten Sie drei 1fr-Tracks wie zuvor. Der erste Wert, der an die Funktion repeat() übergeben wird, gibt an, wie oft Sie die Auflistung wiederholen möchten, während der zweite Wert eine Track-Auflistung ist, die eine oder mehrere Tracks sein 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 zu halten. Dieses Konzept hebt den Unterschied zwischen expliziten und impliziten Grids hervor. Hier ist ein wenig mehr über den Unterschied zwischen den beiden Grid-Typen:

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, indem zusätzliche Grid-Linien gezeichnet werden.

Standardmäßig sind im impliziten Grid erstellte Tracks auto dimensioniert, was im Allgemeinen bedeutet, dass sie groß genug sind, um ihren Inhalt zu enthalten. Wenn Sie impliziten Grid-Tracks eine Größe geben 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 Ihrem CSS hinzufügen, 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);
}

css

.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 in diese Tracks einfügen, die höher als 100 Pixel sind, in welchem Fall es zu einem Überlauf kommen könnte. 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 Sie nie wirklich wissen, wie hoch etwas sein wird — zusätzlicher Inhalt oder größere Schriftgrößen können Probleme mit Designs verursachen, die in jeder Dimension pixelgenau sein wollen.

Die minmax()-Funktion ermöglicht es uns, eine Mindest- und Maximalgröße für einen Track festzulegen, zum Beispiel minmax(100px, auto). Die Mindestgröße beträgt 100 Pixel, aber die maximal Größe ist auto, was sich erweitert, 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);
}

css

.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 genau entlang der Zeile erfolgt.

So viele Spalten wie passen

Wir können einige der Lektionen, die wir über Track-Auflistung, Repeat-Notation und minmax() gelernt haben, kombinieren, um ein nützliches Muster zu erstellen. Manchmal ist es hilfreich, dem Grid zu ermöglichen, so viele Spalten wie möglich in den Container zu stecken. Wir tun dies, indem wir den Wert von grid-template-columns mit der repeat()-Funktion festlegen, aber anstatt eine Zahl zu übergeben, übergeben wir das Schlüsselwort auto-fit. Für den zweiten Parameter der Funktion verwenden wir minmax() mit einem Mindestwert, der der Mindest-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);
}

css

.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 möglich in den Container schiebt und dann den verbleibenden Raum zwischen allen Spalten teilt. Das Maximum ist 1fr, das, wie wir bereits wissen, Raum gleichmäßig zwischen Tracks verteilt.

Linienbasierte Platzierung

Wir gehen jetzt vom Erstellen eines Grids zur Platzierung von Objekten im Grid über. Unser Grid hat immer Linien — diese sind von 1 an nummeriert und beziehen sich auf den Schreibmodus des Dokuments. Zum Beispiel würde die Spaltenlinie 1 im Englischen (von links nach rechts geschrieben) auf der linken Seite des Grids liegen und die Zeilenlinie 1 oben, während im Arabischen (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 Anfangs- und Endlinien des Grid-Bereichs angeben, in dem ein Element platziert werden soll. Es gibt vier Eigenschaften, die wir verwenden können, um dies zu tun:

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

grid-column als Abkürzung für grid-column-start und grid-column-end
grid-row als Abkürzung für grid-row-start und grid-row-end

html

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

css

.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 seine eigene Zelle im Grid platziert. Das <header> nimmt 1fr (ein Viertel) ein und das <main> nimmt 3fr (drei Viertel) ein.

Lassen Sie uns alle Elemente für unsere Seite mithilfe der Grid-Linien arrangieren. Fügen Sie die folgenden Regeln am Ende Ihres 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;
}

css

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 das <header> und das <footer> auf 1 / 3 eingestellt, was bedeutet, dass sie bei Linie 1 beginnen und bei Linie 3 enden.

Hinweis: Sie können auch den Wert -1 verwenden, um die Endspalten- oder Zeilenlinie zu markieren und dann negative Werte verwenden, um von den Enden nach innen zu zählen. Beachten Sie außerdem, dass Linien immer von den Rändern des expliziten Grids zählen, nicht vom impliziten Grid.

Positionierung mit grid-template-areas

Eine alternative Möglichkeit, Objekte auf Ihrem Grid zu arrangieren, ist die Verwendung der grid-template-areas-Eigenschaft und die Vergabe von Namen an die verschiedenen Elemente Ihres Designs.

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

css

.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 festzulegen, wie die 3 Reihen angeordnet sind. Die erste Zeile hat einen Wert von 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 füllen.
Um sich über zwei Zellen zu erstrecken, wiederholen Sie den Namen.
Um eine Zelle leer zu lassen, verwenden Sie ein . (Punkt).
Bereiche müssen rechteckig sein — zum Beispiel können Sie keinen L-förmigen Bereich haben.
Bereiche können nicht an verschiedenen Standorten wiederholt werden.

Sie können mit unserem Layout experimentieren, indem Sie den Footer so ändern, dass er nur unter dem Artikel sitzt und die Sidebar über die ganze Länge nach unten reicht. Diese Methode ist sehr vorteilhaft, da es klar ist, schon durch einen Blick auf das CSS, genau zu wissen, was passiert.

Verschachtelte Grids und Subgrid

Es ist möglich, ein Grid innerhalb eines anderen Grids zu verschachteln, um ein "Subgrid" zu erstellen. Dies können Sie tun, indem Sie die Eigenschaft display: grid bei einem Element im übergeordneten Grid verwenden.

Lassen Sie uns das vorherige Beispiel erweitern, indem wir ein Container für Artikel hinzufügen und ein verschachteltes Grid verwenden, um das Layout mehrerer Artikel zu kontrollieren. Obwohl wir nur eine Spalte im verschachtelten Grid verwenden, können wir die Zeilen verwenden, um ein 4:3:3-Verhältnis mit der Eigenschaft grid-template-rows festzulegen. Dieser Ansatz ermöglicht es uns, ein Layout zu schaffen, in dem ein Artikel oben auf der Seite groß angezeigt wird, während die anderen ein kleineres, wie Vorschau gestaltetes Layout 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;
}

css

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. Dadurch können Sie die im übergeordneten Grid definierten Tracks nutzen.

Im folgenden Beispiel verwenden wir die linienbasierte Platzierung, wodurch das verschachtelte Grid mehrere Spalten und Zeilen des übergeordneten Grids überspannen kann. Wir haben subgrid hinzugefügt, um die Spaltentracks des übergeordneten Grids zu erben, 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;
}

css

.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, die ein 12- oder 16-Spalten-Grid anbieten, um Ihnen bei der Ausrichtung 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 die Spezifikation integriert und wird von den meisten modernen Browsern unterstützt.

Dies hat einen Container mit einem 12-Spalten-Grid, definiert durch grid-template-columns: repeat(12, 1fr);, und die gleiche Markierung, die wir in den vorherigen beiden Beispielen verwendet haben. Wir können jetzt 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;
}

css

.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 in Ihrem Design zu überlagern, können Sie sehen, wie unser 12-Spalten-Grid funktioniert.

Ein 12-Spalten-Grid überlagert unser Design.

Zusammenfassung

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

Im nächsten Artikel werden wir Ihnen einige Tests geben, die Sie verwenden können, um zu überprüfen, wie gut Sie diese Informationen verstanden und behalten haben.

Siehe auch

CSS-Grid-Layout: Hauptseite des CSS-Grid-Layout-Moduls, die viele weitere Ressourcen enthält
Ein vollständiger Leitfaden zum CSS-Grid: Ein visueller Leitfaden auf CSS-Tricks (2023).
Grid Garden: Ein pädagogisches Spiel, um die Grundlagen des Grids auf cssgridgarden.com zu lernen und besser zu verstehen.

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden