CSS Grid auto-fit / auto-fill – Responsive Layouts ohne Media Queries

Die verschiedenen Darstellungsformen responsiver Website-Layouts werden üblicherweise mit Media Queries realisiert. Mit CSS Grid kann dank der minmax()-Funktion und den Schlüsselwörtern auto-fit bzw. auto-fill allerdings auf Media Queries verzichtet werden. Das ist sehr komfortabel für Entwickler und führt zu stufenlos flexiblen Ansichten.

Die minmax()-Funktion

Mit Hilfe der CSS minmax()-Funktion können Rasterzellen mit einer Mindest- und Maximalbreite versehen werden. Wie der Name der Funktion bereits andeutet, wird innerhalb der runden Klammern zuerst der Wert für die Mindestbreite des Elementes vergeben, anschließend mit Komma getrennt die Maximalausdehnung.

Der folgende Code erzeugt ein CSS Grid mit einer Zeile und drei Spalten. Beide Spalten sind mindestens 300 Pixel breit und maximal 500 Pixel breit.

.container {
    display: grid;
    grid-template-columns: 
      minmax(300px, 500px) 
      minmax(300px, 500px)
      minmax(300px, 500px)
 ;
} 

Details zur minmax()-Funktion findet ihr hier. 

Die repeat()-Funktion

Wenn innerhalb eines CSS Grids Bereiche wiederholt werden sollen, so kann dafür die repeat()-Funktion genutzt werden. Der 1. Wert in repeat() steht für die Anzahl der Wiederholungen. Anschließend folgenden die gewünschten Grid-Eigenschaften.

Der folgende Code erzeugt das gleiche Ergebnis wie im vorherigen Beispiel, allerdings kürzer geschrieben, dank repeat();

.container {
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 500px));
} 

Details zur repeat()-Funktion findet ihr hier. 

Das auto-fit Schlüsselwort

Innerhalb der repeat()-Funktion kann nun anstelle der Anzahl der Wiederholungen auch das Schlüsselwort auto-fit verwendet werden. auto-fit bedeutet in unserem Beispiel, dass unterschiedlich viele Spalten erzeugt werden, je nachdem wie viele in die Zeile des Grids passen.

Wenn also eine Spalte mindestens 300 Pixel schmal und maximal 500 Pixel breit sein soll, dann passen auf einem 1400 Pixel breiten Viewport vier Spalten nebeneinander. Diese würden sich bis zu einem Viewport von 1500 Pixel flexibel ausdehnen, dann passen fünf Elemente nebeneinander usw.

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 500px));
} 

Flexible Einheiten

Wenn nun die starren 300er-Pixelwerte durch flexible 1fr-Einheiten ersetzt werden, ist alles wunderbar responsive.

Der folgende Code erzeugt ein flexibles »auto-responsives« Raster, in dem Elemente immer mindestens 300 Pixel breit sind. Im Umkehrschluss reduziert das Grid automatisch die Anzahl der Spalten, sobald 300 Pixel unterschritten werden.

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

Beispiel anschauen

auto-fit vs. auto-fill

Neben dem Schlüsselwort auto-fit, existiert auch noch auto-fill. Je nach Szenario kommt es vor, dass kaum ein Unterschied sichtbar ist. Am einfachsten ist der Unterschied erkennbar, wenn man die beiden Ansätze direkt vergleicht:

CSS Grid auto-fill und auto-fit im direkten Vergleich

Beispiel anschauen

Minimale Breite der Elemente unterschreiten

Die bisher gezeigten Lösungen haben allesamt ein Problem: Die Objekte haben im Beispiel eine Mindestbreite von 300 Pixel zugewiesen bekommen. Die Spalten können sich daher ausdehnen – allerdings leider nicht in der minimalen Breite schrumpfen, da die 300px ja bereits den kleinsten Punkt definieren. Auf kleineren Viewports wird das Objekt daher angeschnitten.

Gelöst werden kann das Problem, indem noch einmal die min()-Funktion verwendet wird:

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

Sollte es in eurem Build-Prozess, im Sass-Compiler oder an vergleichbarer Stelle im Workflow zu einem Problem bei der Kompilierung kommen, schreibt den Code wie folgt um:

.grid {
    display: grid;
    grid-template-columns: #{'repeat(auto-fit, minmax(min(300px, 100%), 1fr))'};
}

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 19 Kommentare

  1. Mert Arslan
    schrieb am 22.12.2020 um 02:28 Uhr:

    Das stimmt leider nicht!

    Wenn also eine Spalte mindestens 300 Pixel schmal und maximal 500 Pixel breit sein soll, dann passen auf einem 1400 Pixel breiten Viewport vier Spalten nebeneinander. Diese würden sich bis zu einem Viewport von 1500 Pixel flexibel ausdehnen, dann passen fünf Elemente nebeneinander usw.

    .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 500px));
    }

    Denn nach dieser Logik sollten in einem Viewport von ca 600px, 2columns zu sehen sein. Allerdings entstehen die erst ab 2000px, woran liegt das?

    Antworten
    • Jonas Hellwig
      schrieb am 22.12.2020 um 09:56 Uhr:

      Vielen Dank für deinen Kommentar, leider kann ich das von dir beschriebene Verhalten nicht nachvollziehen. Das Beispiel verhält sich so, wie oben im Text beschrieben. Was die Werte minimal verändert, sind die äußeren Umstände des Beispiels. body und div haben beispielsweise margin und padding und border, so dass das Layout sich nicht bei exakt 1500 Pixeln verändert. Wenn ich diese Werte alle auf Null setze, reagiert es wie beschrieben.

      Antworten
      • Mert Arslan
        schrieb am 22.12.2020 um 22:27 Uhr:

        „Wenn also eine Spalte mindestens 300 Pixel schmal und maximal 500 Pixel breit sein soll, dann passen auf einem 1400 Pixel breiten Viewport vier Spalten nebeneinander. Diese würden sich bis zu einem Viewport von 1500 Pixel flexibel ausdehnen, dann passen fünf Elemente nebeneinander usw.“

        Du hast da geschrieben gehabt, dass bei einem Viewport von 1500px, fünf Spalten entstehen, wenn die Vorraussetzung: grid-template-columns:repeat(autofit,minmax(300px, 500px) ist. Das stimmt leider nicht da hätten wir 3columns/Spalten.Der Grund ist der, dass alle Spalten gleich der maximale Ausdehnung sein müssen. Indem Falle passen in 1500px:500px, nur 3 Spalten. Erst wenn wir den Max mit „1fr“ machen, haben wir automatisch 5columns.

      • Fritz
        schrieb am 21.01.2021 um 20:11 Uhr:

        Hallo,
        Irgendwas funktioniert da nicht, oder ich übersehe etwas.

        Du schreibst zu nachfolgendem Snippet „Diese würden sich bis zu einem Viewport von 1500 Pixel flexibel ausdehnen“

        „`
        .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 500px));
        }
        „`

        Da dehnt sich aber nichts flexibel aus wenn man als Max-Argument nicht einen `fr` Wert nimmt. In Zusammenhang mit `auto-fit` wird offenbar nur der Wert des Max-Arguments genommen. Sobald es sich nicht mehr im Viewport ausgeht bricht die Column weg, die Elemente behalten immer die Max-Breite. Wenn man nicht auto-fit sondern z.B 3 Spalten angibt funktioniert es und die Elemente schrumpfen oder wachsen entsprechend der `minmax()`-Funktion.

        Ich bitte um eine Demo, falls du der Meinung bist dass es doch wie von dir beschrieben funktioniert.

      • Jonas Hellwig
        schrieb am 25.05.2021 um 19:44 Uhr:

        Ich habe den Beitrag noch einmal aktualisiert und den Unterschied zwischen auto-fill und auto-fit mit aufgenommen. Vielleicht löst das das Missverständnis?

  2. Martin Dierks
    schrieb am 26.10.2020 um 14:44 Uhr:

    Das mit autofit+minmax erscheint mir fast zu schön, um wahr zu sein. Funktioniert das auch mit verschieden großen Spalten und etwas komplexeren Layouts, z.B. für Artikelseiten mit grid-template-columns: 1fr 2fr 1fr und header, nav, article, aside, footer?

    Möglicherweise kommt es dann nur auf clevere Werte für minmax an, aber es fällt schon auf, dass im Web fast immer nur Bildergalerien und cards (alle gleich groß) als Beispiele zu finden sind.

    Antworten
  3. Matthias Wendt
    schrieb am 17.03.2019 um 18:06 Uhr:

    Vielen, vielen Dank,
    ich habe ewig nach einem einfachen dreispaltigen und responsiven Design gesucht. Funktioniert wunderbar.

    Antworten
  4. Ralf
    schrieb am 23.01.2019 um 14:13 Uhr:

    Sehr schöne Sache. Leider unterstützt der IE11 es nicht :-(

    Antworten
  5. Christoph
    schrieb am 06.12.2018 um 16:12 Uhr:

    Nur wann können wir es auch wirklich einsetzen? :(

    Antworten
    • Jonas Hellwig
      schrieb am 06.12.2018 um 18:50 Uhr:

      Wir haben es in aktuellen Projekten min Einsatz.

      Antworten
  6. Kai Weissmann
    schrieb am 23.11.2018 um 10:34 Uhr:

    Danke für den tollen Beitrag! Diese Lösung ist soviel besser, als mit Media Queries zu arbeiten. Habe immer gedacht es muss bequemere Lösungen geben. CSS Rules! :)

    Antworten
  7. Manuel
    schrieb am 09.11.2018 um 22:36 Uhr:

    Hilfreicher Artikel – wieder was gelernt :) Beim nächsten Projekt werde ich tatsächlich mal auf ein CSS-Grid zurückgreifen, die Unterstützung scheint inzwischen ausreichend gegeben.

    Antworten
  8. Hannes
    schrieb am 06.11.2018 um 12:36 Uhr:

    Danke für den Beitrag, klingt verlockend das zu testen! Ich werde es bei meinem nächsten Projekt ausprobieren. Ich bin gespannt!

    Antworten
  9. Marcel
    schrieb am 11.07.2018 um 08:57 Uhr:

    Hallo Jonas,

    super Artikel, mir ist nur eine Kleinigkeit aufgefallen, in dem Codeblock „Flexible Einheiten“ steht bei minmax 33,333% – beim ansehen im Codebeispiel stimmt es dann mit 300px ;)

    Werde das ganze definitiv mal bei uns testen :)

    Antworten
    • Jonas Hellwig
      schrieb am 11.07.2018 um 09:36 Uhr:

      Besten Dank für den Hinweis mit dem 300 Pixeln. Ist jetzt behoben.

      Antworten
  10. Astrid
    schrieb am 10.07.2018 um 22:50 Uhr:

    Funktioniert das in allen Browsern?

    Antworten
    • Jonas Hellwig
      schrieb am 11.07.2018 um 08:30 Uhr:

      Was funktioniert schon in allen Browsern? Es funktioniert in allen projektrelevanten Browsern, für ältere haben wir eine saubere Lösungs als Fallback nach dem PE-Prinzip.

      Den exakten Support findest du bei caniuse.

      Antworten
  11. Arne
    schrieb am 10.07.2018 um 14:10 Uhr:

    Sehr guter Artikel und super hilfreiche Funktion!
    Im CSS steht auto-fill statt auto-fit :)

    Antworten
    • Jonas Hellwig
      schrieb am 10.07.2018 um 14:21 Uhr:

      Ich finde das Feature auch super praktisch für einzelne Grid-Komponenten im Inhaltsbereich. Der Tipp-Fehler ist korrigiert.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →