kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS Grid 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 dem Schlüsselwort auto-fit allerdings auf Media Queries verzichtet werden. Das ist sehr komfortabel für Entwickler und führt zu stufenlos flexiblen Ansichten.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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 den Viewport 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.

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

Beispiel anschauen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

11 Kommentare

  1. Arne

    Verfasst am 10. Juli 2018 um 14:10 Uhr.

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

    • Jonas Hellwig

      Verfasst am 10. Juli 2018 um 14:21 Uhr.

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

  2. Astrid

    Verfasst am 10. Juli 2018 um 22:50 Uhr.

    Funktioniert das in allen Browsern?

    • Jonas Hellwig

      Verfasst am 11. Juli 2018 um 8: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.

  3. Marcel

    Verfasst am 11. Juli 2018 um 8: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 :)

    • Jonas Hellwig

      Verfasst am 11. Juli 2018 um 9:36 Uhr.

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

  4. Hannes

    Verfasst am 6. November 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!

  5. Manuel

    Verfasst am 9. November 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.

  6. Kai Weissmann

    Verfasst am 23. November 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! :)

  7. Christoph

    Verfasst am 6. Dezember 2018 um 16:12 Uhr.

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

    • Jonas Hellwig

      Verfasst am 6. Dezember 2018 um 18:50 Uhr.

      Wir haben es in aktuellen Projekten min Einsatz.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.