CSS Grid: Layouts in Zeilen und Spalten aufbauen

Kurz: CSS Grid ordnet Elemente in einem zweidimensionalen Raster aus Zeilen und Spalten an; es ist ideal für ganze Seitenlayouts, während Flexbox besser für Reihen oder Spalten einzelner Bereiche passt.

Genauer: Mit display: grid wird ein Container zum Raster. Man legt Spalten und Zeilen fest, die Kinder füllen die Zellen automatisch oder werden gezielt platziert.

Im Detail

Grundlagen

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

fr ist ein Bruchteil des freien Platzes. gap setzt Abstände zwischen den Zellen. Mit grid-column: 1 / 3 überspannt ein Element zwei Spalten; grid-template-areas erlaubt benannte Bereiche (“kopf kopf”, “seite inhalt”).

Responsive ohne Media Query

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); erzeugt so viele Spalten, wie passen, mindestens 220 px breit. Auf dem Handy eine Spalte, auf dem Desktop vier, ohne einen einzigen Breakpoint. minmax(), auto-fill/auto-fit und aspect-ratio sind die wichtigsten Werkzeuge.

Grid oder Flexbox?

• Grid: zweidimensional, Layout von außen (Raster zuerst, Inhalt füllt).
• Flexbox: eindimensional, Layout von innen (Inhalt bestimmt die Größe), etwa Navigationsleisten.
• Beide lassen sich kombinieren: Grid für das Seitengerüst, Flexbox für Zeilen innerhalb der Zellen.
• Subgrid (grid-template-columns: subgrid) lässt Kinder die Spuren des Elternrasters nutzen; in aktuellen Browsern verfügbar.

Fehler vermeiden

• Zu viele feste Pixelwerte; besser fr, minmax, %.
• Reihenfolge im HTML nicht nur visuell umbauen: Tab- und Screenreader-Reihenfolge folgt dem Quelltext.
• Mit den Grid-Werkzeugen der Browser-Entwicklertools die Spuren sichtbar machen.

Siehe auch: Flexbox, Media Queries und Breakpoints, Tailwind CSS