Wie erstellen Sie ein Layout mit CSS Grid?

Question

Accepted Answer

**CSS Grid** ist ein zweidimensionales Layoutsystem — es steuert **Zeilen und Spalten gleichzeitig**, anders als die einzelne Zeile von Flexbox. Sie definieren ein Grid im Container und platzieren Elemente darin.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## Die fr-Einheit und repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr` ("Bruch") verteilt verfügbaren Platz — `1fr 2fr` teilt ihn im Verhältnis 1:2. `repeat(3, 1fr)` ist eine Kurzschreibweise für drei gleiche Spuren.

## Responsives Grid OHNE Media Queries

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

Diese eine Zeile erstellt ein vollständig responsives Kartengrid: jede Spalte ist mindestens `250px`; der Browser passt **so viele wie möglich** pro Zeile an und bricht den Rest um — wechselt automatisch von 4 Spalten auf dem Desktop zu 1 auf dem Mobilgerät. `auto-fit` + `minmax` ist eines der beliebtesten Muster von Grid.

## Elemente über Zellen platzieren

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

Elemente können sich über mehrere Zeilen/Spalten erstrecken und ermöglichen magazinartige Layouts, die mit Flexbox umständlich sind.

## Grid vs Flexbox

- **Grid** — 2D-Layout (Zeilen *und* Spalten): Seitenlayouts, Kartengitter, Dashboards.
- **Flexbox** — 1D-Layout (eine einzelne Zeile oder Spalte): Navigationsleisten, Schaltflächengruppen, Zentrierung.

Sie komponieren gut — eine Gridcelle kann selbst ein Flex-Container sein.

## Warum es wichtig ist

Grid ist das leistungsstärkste CSS-Layoutwerkzeug — es bewältigt Layouts auf ganzer Seite und responsive Kartengitter sauber, oft ersetzt es verschachtelte div-Hacks.

Allein das `auto-fit`/`minmax` responsive Muster macht viele Media Queries überflüssig.