CSS-Grid-Generator

Der erzeugte Container

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

• repeat(3, minmax(0, 1fr)): drei Spalten, die die verfügbare Breite gleichmäßig teilen. 1fr ist ein Bruchteil des verbleibenden Raums; minmax(0, 1fr) lässt Spalten unter ihre Inhaltsgröße schrumpfen.
• gap: der Abstand zwischen jedem Track.
• Die Media Query schaltet auf repeat(auto-fit, minmax(220px, 1fr)) um, also so viele Spalten wie passen, jede mindestens 220px breit. Der Breakpoint ist die Spaltenanzahl mal der Mindestbreite (mit einem Minimum von 120px), sodass das Grid auf kleinen Bildschirmen umbricht statt zu quetschen.

Die Einheit fr

fr bedeutet “ein Bruchteil des verbleibenden Raums”: Nach Abzug der festen Tracks wird der Rest durch die Gesamtzahl der fr-Einheiten geteilt.

grid-template-columns: 200px 1fr 2fr;

Auf einem 1000px-Container nimmt die erste Spalte 200px, die restlichen 800px teilen sich 1:2, also 267px und 533px.

auto-fill vs. auto-fit

• auto-fill: erzeugt leere Platzhalter-Tracks, wenn es nicht genug Elemente gibt.
• auto-fit: faltet leere Tracks auf null zusammen, sodass die verbleibenden Elemente die Reihe füllen.

Der responsive Fallback nutzt auto-fit, genau richtig für Karten-Grids: Die Reihe sieht immer voll aus.

Unterschiedliche Spaltenbreiten

Der Generator erzeugt gleiche Spalten. Bearbeiten Sie das Ergebnis, um Größen zu mischen: grid-template-columns: 200px 1fr 2fr; ergibt eine feste Sidebar und zwei flexible Spalten im Verhältnis 1:2. Für benannte Bereiche (grid-template-areas) oder explizite Platzierung (grid-column: 1 / 3) ergänzen Sie diese Regeln von Hand über dem erzeugten Container.

Grid vs. Flexbox

• Grid: explizites 2D-Layout mit Tracks. Gut, wenn das Layout eine Zeilen- und Spaltenstruktur hat (Seitengerüst, Galerie, Dashboard).
• Flexbox: 1D-Ausrichtung entlang einer Achse. Gut, wenn Elemente natürlich fließen (Navigationsleiste, Button-Reihe).

Reale Layouts kombinieren beides: Grid für das Seitengerüst, Flexbox innerhalb der Komponenten.

Häufige Fehler

• min-width: 0 bei Kindern vergessen: Grid-Elemente verwenden standardmäßig die Mindestbreite ihres Inhalts, wodurch fr-Spalten nicht unter das längste Wort schrumpfen können. Setzen Sie min-width: 0 auf die Kinder, damit sie schrumpfen können.
• Verschachteln ohne display: grid: Ein Grid-Kind ist nicht selbst ein Grid, solange Sie es nicht deklarieren.