Responsive Layouts mit CSS Grid: Tutorial mit minmax und auto-fit

Von Jan-Tristan Rudat

Aktualisiert: Juni 2026

Responsives Webdesign hieß lange Zeit: viele Breakpoints, viele Media Queries, viel Pflegeaufwand. CSS Grid dreht dieses Prinzip um. Mit den Funktionen repeat(), minmax() und den Schlüsselwörtern auto-fit beziehungsweise auto-fill entstehen Layouts, die sich von selbst an die verfügbare Breite anpassen. Du beschreibst nicht mehr, was bei genau 768 Pixeln passiert, sondern definierst Regeln, nach denen der Browser die Spalten eigenständig berechnet. Dieses Tutorial zeigt Schritt für Schritt, wie das funktioniert, wo die Stolperfallen liegen und wann klassische Media Queries trotzdem die bessere Wahl bleiben.

Alle Beispiele kannst du direkt im CSS Grid Generator nachbauen und live ausprobieren, ohne etwas zu installieren. Die Werte sind so gewählt, dass sie sich eins zu eins in eigene Projekte übernehmen lassen.

Das Grundprinzip: intrinsisch responsiv statt breakpoint-getrieben

Der klassische Ansatz fragt: Wie breit ist der Bildschirm? Der moderne Grid-Ansatz fragt: Wie viel Platz ist im Container, und wie viele sinnvoll breite Spalten passen da hinein? Diesen Stil nennt man intrinsisch responsiv, weil das Layout auf den tatsächlich verfügbaren Raum reagiert und nicht auf eine willkürliche Viewport-Schwelle. Der entscheidende Baustein dafür ist eine einzige Zeile:

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

Diese vier Zeilen ergeben eine Karten-Galerie, die auf einem breiten Monitor vier oder fünf Spalten zeigt, auf einem Tablet zwei bis drei und auf dem Smartphone eine einzige, ohne eine einzige Media Query. Der Browser teilt die Containerbreite immer wieder durch die geforderte Mindestbreite und legt entsprechend viele Spalten an. Damit das verständlich wird, sehen wir uns die drei beteiligten Funktionen einzeln an.

minmax(): die flexible Spurenbreite

minmax(min, max) definiert eine Spalten- oder Zeilenspur mit zwei Grenzen. Die Spur darf nie kleiner als der erste Wert und nie größer als der zweite Wert werden. minmax(250px, 1fr) bedeutet also: mindestens 250 Pixel breit, und wenn mehr Platz da ist, wächst die Spur flexibel auf ihren fr-Anteil. Die Einheit fr (fraction) verteilt den Restplatz, nachdem feste Größen und Abstände abgezogen wurden. Wer die fr-Einheit genauer verstehen will, findet die Details im Ratgeber zur fr-Einheit.

auto-fit vs auto-fill: der wichtigste Unterschied

Beide Schlüsselwörter sagen dem Browser, dass er die Spaltenanzahl selbst bestimmen soll. Der Unterschied zeigt sich nur, wenn weniger Items vorhanden sind, als Spalten in eine Zeile passen würden. auto-fill legt trotzdem alle möglichen Spalten an und lässt die überzähligen leer, es bleiben also sichtbare Lücken am Zeilenende. auto-fit kollabiert diese leeren Spuren auf die Breite 0, sodass die vorhandenen Karten den gesamten Platz ausfüllen und sich gleichmäßig verteilen.

Faustregel: Sollen die vorhandenen Karten den Platz möglichst ausfüllen, nimm auto-fit. Soll dagegen die Spaltenbreite konstant bleiben und am Ende Platz für künftige Items reserviert werden, ist auto-fill richtig. Im Zweifel ist auto-fit für Galerien und Karten-Raster die häufiger gewünschte Variante.

Die Werkzeuge im Überblick

Komplettes Beispiel: eine responsive Karten-Galerie

Hier ein lauffähiges, vollständiges Beispiel. Kopiere es in eine HTML-Datei, öffne sie im Browser und ändere die Fensterbreite: Die Spaltenzahl passt sich stufenlos an, von einer bis zu mehreren Spalten.

<style>
  .galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1rem;
    padding: 1rem;
  }
  .karte {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
  }
</style>

<div class="galerie">
  <div class="karte">Karte 1</div>
  <div class="karte">Karte 2</div>
  <div class="karte">Karte 3</div>
  <div class="karte">Karte 4</div>
  <div class="karte">Karte 5</div>
  <div class="karte">Karte 6</div>
</div>

Der entscheidende Teil ist repeat(auto-fit, minmax(min(220px, 100%), 1fr)). Das min(220px, 100%) verhindert horizontales Scrollen auf schmalen Geräten, auto-fit sorgt für volle Zeilen, und 1fr verteilt den Restplatz gleichmäßig. Mehr Aufwand braucht eine moderne Karten-Galerie nicht.

Wann Media Queries trotzdem sinnvoll sind

Für reine Spaltenanzahl sind Media Queries mit Grid oft überflüssig. Sobald sich aber die Struktur des Layouts ändern soll, kommen sie zurück ins Spiel. Ein klassisches Beispiel ist das Seitengerüst mit Kopfzeile, Seitenleiste, Inhalt und Fußzeile, das auf dem Desktop nebeneinander, auf dem Smartphone aber untereinander stehen soll. Hier helfen benannte Bereiche mit grid-template-areas in Kombination mit einer Media Query:

.seite {
  display: grid;
  gap: 1rem;
  grid-template-areas:
    "kopf"
    "inhalt"
    "leiste"
    "fuss";
}

@media (min-width: 768px) {
  .seite {
    grid-template-columns: 220px 1fr;
    grid-template-areas:
      "kopf   kopf"
      "leiste inhalt"
      "fuss   fuss";
  }
}

Auf kleinen Bildschirmen erscheinen alle Bereiche gestapelt, ab 768 Pixeln rückt die Seitenleiste neben den Inhalt. Diese strukturelle Umordnung lässt sich mit auto-fit nicht ausdrücken, weil dabei nicht nur die Spaltenzahl, sondern die Anordnung der Bereiche wechselt. Faustregel: auto-fit und minmax für gleichartige Elemente, Media Queries für strukturelle Layoutwechsel.

Häufige Fehler und wie du sie vermeidest

• Fester Pixel-Mindestwert ohne Absicherung. minmax(300px, 1fr) läuft auf einem 320-Pixel-Viewport mit Padding über. Lösung: minmax(min(300px, 100%), 1fr).
• auto-fill statt auto-fit bei wenigen Items. Du wunderst dich über große Lücken am Zeilenende. Meist willst du auto-fit.
• gap vergessen. Ohne gap kleben die Karten aneinander. gap ersetzt fehleranfällige Außenabstände an den Items.
• Zu viele Media Queries. Wer für jede Spaltenzahl eine eigene Query schreibt, verschenkt den Vorteil von auto-fit. Eine Regel reicht oft aus.
• Höhenunterschiede ignoriert. Unterschiedlich hohe Karten richten sich standardmäßig an der höchsten aus. Mit align-items: start behält jede Karte ihre eigene Höhe.

Schneller zum Ziel mit dem Generator

Du musst die Syntax nicht auswendig kennen. Im CSS Grid Generator stellst du Spalten, minmax-Werte und gap visuell ein, schaltest zwischen Mobile-, Tablet- und Desktop-Vorschau um und exportierst sauberes CSS samt der passenden Media Queries. Das Tool läuft zu 100 Prozent lokal in deinem Browser, sendet keine Daten an einen Server und ist damit auch ohne Cookie-Banner DSGVO-konform nutzbar. So testest du auto-fit, auto-fill und minmax in Sekunden, statt Werte im Editor zu erraten.

Häufige Fragen zu responsivem CSS Grid

Quellen und weiterführende Spezifikationen

• W3C: CSS Grid Layout Module Level 1, offizielle Spezifikation zu repeat(), auto-fit, auto-fill und minmax.
• MDN Web Docs: Auto-placement in CSS Grid Layout.
• MDN Web Docs: minmax().
• MDN Web Docs: Gängige Layouts mit Grid umsetzen.
• W3C WAI: WCAG 2.2, Understanding Meaningful Sequence (1.3.2), zur Quellordnung und Barrierefreiheit.
• Can I use: CSS Grid Layout, aktuelle Browser-Unterstützung.

Verwandte Artikel