Zum Inhalt springen
IBAW Web Engineer

CSS Grid

Zu normalem Modus wechseln

CSS Grid ist ein leistungsstarkes Layout-System, das speziell für die Erstellung komplexer zweidimensionaler Layouts konzipiert wurde. Es ermöglicht Ihnen, Inhalte in Reihen und Spalten zu organisieren und bietet präzise Kontrolle über die Positionierung und Ausrichtung von Elementen.

Grid-Container und Grid-Items

Abschnitt betitelt „Grid-Container und Grid-Items“

Um mit CSS Grid zu arbeiten, definieren Sie zunächst einen Grid-Container:

.container {
  display: grid;
}

Alle direkten Kindelemente dieses Containers werden automatisch zu Grid-Items.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Reihen und Spalten definieren

Abschnitt betitelt „Reihen und Spalten definieren“

Grundlegende Grid-Struktur

Abschnitt betitelt „Grundlegende Grid-Struktur“

Sie können die Anzahl, Grösse und Position der Spalten und Reihen in Ihrem Grid definieren:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* Drei Spalten mit je 200px Breite */
  grid-template-rows: 100px 100px; /* Zwei Reihen mit je 100px Höhe */
}

Die fr-Einheit

Abschnitt betitelt „Die fr-Einheit“

Die fr-Einheit (fraction) ist ein flexibler Längenanteil, der den verfügbaren Raum verteilt:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Die mittlere Spalte nimmt doppelt so viel Platz ein */
  grid-template-rows: 100px 1fr; /* Erste Reihe 100px hoch, zweite nimmt den Rest */
}

Die repeat()-Funktion

Abschnitt betitelt „Die repeat()-Funktion“

Für sich wiederholende Werte können Sie die repeat()-Funktion verwenden:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Entspricht: 1fr 1fr 1fr */
  grid-template-rows: repeat(2, 100px); /* Entspricht: 100px 100px */
}

Minmax-Funktion

Abschnitt betitelt „Minmax-Funktion“

Die minmax()-Funktion definiert eine Grössenspanne zwischen Minimum und Maximum:

.container {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 500px) 1fr;
  /* Mittlere Spalte mindestens 200px, maximal 500px */
}

Auto-Fit und Auto-Fill

Abschnitt betitelt „Auto-Fit und Auto-Fill“

Diese Werte passen die Anzahl der Grid-Elemente automatisch an:

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* Erstellt so viele Spalten wie möglich, die mindestens 200px breit sind */
}

Der Unterschied zwischen auto-fill und auto-fit:

  • auto-fill: Fügt so viele Spalten ein wie möglich, auch leere
  • auto-fit: Expandiert die vorhandenen Elemente, um den verfügbaren Platz zu füllen

Grid-Abstände (Gaps)

Abschnitt betitelt „Grid-Abstände (Gaps)“

Sie können Abstände zwischen den Reihen und Spalten definieren:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  column-gap: 20px; /* Abstand zwischen Spalten */
  row-gap: 10px; /* Abstand zwischen Reihen */
  /* Oder kurzgefasst: */
  gap: 10px 20px; /* Reihenabstand Spaltenabstand */
}

Positionierung von Grid-Items

Abschnitt betitelt „Positionierung von Grid-Items“

Grundlegende Positionierung

Abschnitt betitelt „Grundlegende Positionierung“

Sie können die Position und Ausdehnung von Grid-Items innerhalb des Grids festlegen:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3; /* Erstreckt sich von Spalte 1 bis 3 (nimmt 2 Spalten ein) */
  grid-row-start: 1;
  grid-row-end: 2; /* Nimmt nur die erste Reihe ein */
}

Kurzschreibweise

Abschnitt betitelt „Kurzschreibweise“
.item1 {
  grid-column: 1 / 3; /* Von Spaltenlinie 1 bis 3 */
  grid-row: 1 / 2; /* Von Reihenlinie 1 bis 2 */
}

Sie können auch die span-Notation verwenden:

.item2 {
  grid-column: 3 / span 2; /* Beginnt bei Linie 3 und erstreckt sich über 2 Spalten */
  grid-row: 1 / span 2; /* Beginnt bei Reihe 1 und erstreckt sich über 2 Reihen */
}

Noch kompakter:

.item3 {
  grid-area: 2 / 1 / 3 / 3; /* Reihenbeginn / Spaltenbeginn / Reihenende / Spaltenende */
}

Namensgebung für Grid-Linien

Abschnitt betitelt „Namensgebung für Grid-Linien“

Sie können den Grid-Linien Namen geben, um die Positionierung intuitiver zu gestalten:

.container {
  display: grid;
  grid-template-columns:
    [sidebar-start] 200px
    [sidebar-end content-start] 1fr
    [content-end];
  grid-template-rows:
    [header-start] 100px
    [header-end main-start] 1fr
    [main-end footer-start] 80px
    [footer-end];
}


.header {
  grid-column: sidebar-start / content-end;
  grid-row: header-start / header-end;
}

Grid-Bereiche (Areas)

Abschnitt betitelt „Grid-Bereiche (Areas)“

Grid Areas ermöglichen eine visuelle Definition des Layouts:

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}


.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.footer {
  grid-area: footer;
}

Mit einem Punkt (.) können Sie leere Bereiche kennzeichnen:

grid-template-areas:
  "header header header"
  "sidebar content ."
  "footer footer footer";

Ausrichtung von Grid-Items

Abschnitt betitelt „Ausrichtung von Grid-Items“

Ausrichtung innerhalb einer Zelle

Abschnitt betitelt „Ausrichtung innerhalb einer Zelle“
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center; /* Horizontale Ausrichtung der Items in ihren Zellen */
  align-items: center; /* Vertikale Ausrichtung der Items in ihren Zellen */
  /* Oder kurzgefasst: */
  place-items: center; /* Vertikale und horizontale Ausrichtung */
}


/* Individuelle Ausrichtung für einzelne Items */
.item1 {
  justify-self: start; /* Horizontale Ausrichtung: start, end, center, stretch */
  align-self: end; /* Vertikale Ausrichtung: start, end, center, stretch */
}

Ausrichtung des gesamten Grids im Container

Abschnitt betitelt „Ausrichtung des gesamten Grids im Container“

Wenn das Grid kleiner als sein Container ist:

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* Grid ist nur 300px breit */
  height: 500px; /* Container ist 500px hoch */
  justify-content: center; /* Horizontale Ausrichtung des Grids im Container */
  align-content: end; /* Vertikale Ausrichtung des Grids im Container */
  /* Oder kurzgefasst: */
  place-content: end center; /* Vertikale und horizontale Ausrichtung */
}

Automatische Platzierung (Auto-Placement)

Abschnitt betitelt „Automatische Platzierung (Auto-Placement)“

Grid positioniert Items automatisch nach einem Algorithmus. Sie können dieses Verhalten beeinflussen:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row; /* Standard: füllt zuerst Reihen, dann Spalten */
  /* grid-auto-flow: column; würde zuerst Spalten füllen */
  grid-auto-flow: dense; /* Versucht, Lücken zu füllen */
}

Implizite Grids (Automatische Erweiterung)

Abschnitt betitelt „Implizite Grids (Automatische Erweiterung)“

Wenn Sie mehr Items haben als definierte Zellen, erstellt Grid automatisch zusätzliche Reihen oder Spalten:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Nur Spalten explizit definiert */
  grid-auto-rows: 100px; /* Höhe der automatisch erstellten Reihen */
}

Oder für Spalten:

.container {
  display: grid;
  grid-template-rows: repeat(2, 100px); /* Nur Reihen explizit definiert */
  grid-auto-columns: 200px; /* Breite der automatisch erstellten Spalten */
}

Responsive Grid-Layouts

Abschnitt betitelt „Responsive Grid-Layouts“

Grid eignet sich hervorragend für responsive Designs:

.container {
  display: grid;
  /* Mobile-First Ansatz */
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
}


/* Tablet */
@media (min-width: 768px) {
  .container {
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
  }
}


/* Desktop */
@media (min-width: 1024px) {
  .container {
    grid-template-columns: 200px 1fr 200px;
    grid-template-areas:
      "header header header"
      "sidebar content related"
      "footer footer footer";
  }
}

Praktische Grid-Layout Beispiele

Abschnitt betitelt „Praktische Grid-Layout Beispiele“

Klassisches 12-Spalten Grid-System

Abschnitt betitelt „Klassisches 12-Spalten Grid-System“
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}


.span-1 {
  grid-column: span 1;
}
.span-2 {
  grid-column: span 2;
}
/* ... und so weiter bis ... */
.span-12 {
  grid-column: span 12;
}

Kartenbasiertes Layout

Abschnitt betitelt „Kartenbasiertes Layout“
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

Verschiedene Grid-Zellgrössen (Masonry-ähnlich)

Abschnitt betitelt „Verschiedene Grid-Zellgrössen (Masonry-ähnlich)“
.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
}


.tall {
  grid-row: span 2;
}
.wide {
  grid-column: span 2;
}
.large {
  grid-row: span 2;
  grid-column: span 2;
}

Übung: Responsive Grid-Layout

Abschnitt betitelt „Übung: Responsive Grid-Layout“

Im nächsten Kapitel werden wir uns mit Responsive Design befassen und lernen, wie Sie Ihre Webseiten für verschiedene Bildschirmgrössen und Geräte optimieren können.

War diese Seite hilfreich?