← Zurück

CSS Grid

Nicht nur benutzen — VERSTEHEN.

🧠 Das mentale Modell

Grid ist ein 2D Layout System. Du definierst Lines (unsichtbare Trennlinien), und Items positionieren sich zwischen diesen Lines.

Line 1
Line 2
Line 3
Line 4
Track 1
Track 2
Track 3

Die fr Unit — wirklich verstanden

fr = Fraction of FREE space. Nicht total space. FREE space.

Beispiel: Container 400px | Columns: 100px 1fr 2fr

100px
1fr
2fr

1. Fixe Größen abziehen: 400px - 100px = 300px frei
2. fr-Summe: 1fr + 2fr = 3fr
3. 1fr = 300px ÷ 3 = 100px
4. Ergebnis: 100px | 100px | 200px

grid-template-columns Patterns

1fr 1fr 1fr

3 gleich breite Spalten

repeat(3, 1fr)

Gleich wie oben, kürzer geschrieben

200px 1fr 1fr

Erste Spalte fix, Rest flexibel

minmax(200px, 1fr) 2fr

Erste Spalte: min 200px, max 1fr

repeat(auto-fit, minmax(250px, 1fr))

Responsive: So viele Spalten wie passen, min 250px

Grid Areas — Visual Layout

grid-template-areas:
  "header header header"
  "sidebar main main"
  "footer footer footer";

header
sidebar
main
footer

💡 Lines werden automatisch benannt: header-start, header-end, etc.

justify-* vs align-*

justify-* (horizontal)

Inline axis = Zeilen-Richtung →

  • justify-items — Items in ihren Cells
  • justify-content — Das ganze Grid
  • justify-self — Ein einzelnes Item

align-* (vertikal)

Block axis = Spalten-Richtung ↓

  • align-items — Items in ihren Cells
  • align-content — Das ganze Grid
  • align-self — Ein einzelnes Item

Merkregel: justify = "J" liegt horizontal. align = aufrecht stehen = vertikal.

Items positionieren

grid-column: 1 / 3

Von Line 1 bis Line 3 (= 2 Spalten)

grid-column: span 2

2 Spalten breit (egal wo)

grid-row: 1 / -1

Von erster bis letzter Line (ganze Höhe)

grid-area: header

In den benannten Bereich "header"

Der place-items Shortcut

.center-everything {
  display: grid;
  place-items: center;
}

place-items: center = align-items: center + justify-items: center

✅ Der einfachste Weg um etwas zu zentrieren!

Quick Reference

Container

  • display: grid
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • gap
  • place-items

Items

  • grid-column
  • grid-row
  • grid-area
  • place-self

✅ Was ich WIRKLICH verstanden habe