CSS Grid in Practice Nützliche Layouts ohne Framework

Flexbox oder Grid? Verwenden Sie beide. Flexbox behandelt eine Achse – Zeile oder Spalte. CSS Grid behandelt beide gleichzeitig. Diese Unterscheidung bestimmt jede Layoutentscheidung, die Sie treffen werden.

Die Eigenschaften, die tatsächlich wichtig sind

Sie können fast jedes Layout, das Sie begegnen, mit fünf Eigenschaften erstellen: grid-template-columns, grid-template-rows, gap, grid-areaund place-items. Hier ist eine zentrierte Karte in sechs Zeilen:

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

place-items: center ist eine Abkürzung für align-items + justify-items. Eine Zeile, perfekt zentrierte Inhalt, ohne Berechnung erforderlich.

Die fr-Einheit: hören Sie auf mit Prozenten zu denken

Prozentwerte berücksichtigen die Spaltabstand nicht. fr (fractional unit) verteilt verbleibende Räume nachdem feste Werte platziert wurden. Dies ist ein Standard-12-Spalten-Grid:

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* Span 4 of 12 columns */
.col-4 {
  grid-column: span 4;
}

/* Span 8 of 12 columns */
.col-8 {
  grid-column: span 8;
}

Jede 1fr erhält einen gleichen Anteil an den verbleibenden Räumen nachdem der Abstand abgezogen wurde. Drei Spalten bei repeat(3, 1fr) überfließen nie den Container – etwas 33.33% kann falsch sein, wenn Abstand beteiligt ist.

Auto-fill vs auto-fit: reaktive Grids ohne Media-Queries

Beide Begriffe lassen dem Browser entscheiden, wie viele Spalten passen. Der Unterschied zeigt sich, wenn weniger Elemente als das Grid halten kann.

auto-fill beibehält leere Spalten. auto-fit vergibt sie, sodass bestehende Elemente sich ausdehnen, um die Zeile zu füllen. Für eine Kartenanordnung möchten Sie fast immer auto-fill:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

Das ist ein vollständig reaktives Karten-Grid. Keine Breakpoints. Jede Karte ist mindestens 280px breit, und der Browser passt so viele wie möglich pro Zeile. Wenn der Bildschirm kleiner als 280px wird, fällt es auf eine Spalte. Verwenden Sie auto-fit wenn Sie drei Karten auf einem breiten Bildschirm haben möchten, sodass sie sich ausdehnen und die Zeile füllen, anstatt in fester Breite zu sitzen mit leeren Räumen daneben.

Die manuelle Prototypierung solcher Layouts dauert Zeit. Ein CSS-Grid-Generator online erlaubt es Ihnen, Spalten, Zeilen und Abstände visuell zu konfigurieren, bevor Sie eine Zeile schreiben – wertvoll sind die zwei Minuten, die Sie beim Debuggen von Spaltenberechnungen sparen.

Namensbereiche: ein lesbares Layout

Grid-Bereiche ersetzen die Positionierung durch Zahlen durch lesbare Namen. Das heilige Gral-Layout – Header, Sidebar, Hauptinhalt und Footer – ist ein klarer Beispiel:

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 1rem;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }
.page-footer  { grid-area: footer; }

Der grid-template-areas String ist eine visuelle Karte Ihres Layouts. Ein Punkt (.) markiert eine leere Zelle. Benennen Sie einen Bereich durch Änderung eines Strings – ohne Zeilennummern neu zu berechnen.

Gängige Layouts unter 10 Zeilen

Sobald Sie die Grundlagen beherrschen, kollabieren die meisten wiederkehrenden Muster auf nur ein paar Zeilen.

Sidebar + Inhalt:

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
}

Stackte Abschnitte mit konstanter vertikaler Rhythmus:

.page-sections {
  display: grid;
  gap: 4rem;
}

Auto-wrapping-Icon-Grid:

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 1rem;
}

Grid-Inspektor in Chrome DevTools

Öffnen Sie DevTools, wählen Sie einen beliebigen Grid-Container im Elements-Fenster aus und suchen Sie nach dem grid Badge neben dem Element. Klicken Sie darauf, um die Grid-Übersicht zu aktivieren – Sie erhalten eine visuelle Darstellung aller Spalten, Zeilen und Abstände direkt auf der Seite.

Im Layout Fenster (neben Computed und Styles) können Sie bestimmen, was die Übersicht anzeigt: Zeilennummern, Zeilennamen, Bereichsnamen und erweiterte Linien, die jenseits der Grid-Grenze hinausgehen. Wenn ein Layout bricht, zeigt die Aktivierung von Zeilennummern beim Beobachten der Übersicht oft sofort die falsch ausgerichtete Spur – viel schneller als die Lesung der Rohwerte im Styles-Fenster. grid-column Ein praktischer Gewohnheit: erstellen Sie die Struktur in DevTools, bevor Sie die Werte in Ihre Stylesheet übernehmen, sobald das Grid richtig aussieht.

Was Grid noch Flexbox lässt

Grid ist die richtige Wahl für zweidimensionale Strukturen: Seitenabschnitte, Kartenanordnungen, komplexe Dashboards. Flexbox bleibt besser für eindimensionale Flüsse – Navigationslinks, die sich umschließen, Button-Gruppen, Formeingaben mit eingebauten Labels und überall dort, wo Elemente wachsen oder schrumpfen, basierend auf ihrem Inhalt anstatt auf einer definierten Spur.

In der Praxis verwenden Sie Grid für das äußere Layout und Flexbox für die Komponenten innerhalb davon. Sie kombinieren sich reibungslos; wählen Sie das, das der Achse des Problems entspricht.

CSS Grid in Practice: Nützliche Layouts ohne Framework 2

Das könnte Ihnen auch gefallen