CSS Grid: Automatisches responsives Raster mit Lücken

Mit CSS-Grid lassen sich  dank der magischen Formel repeat(auto-fill, minmax()) sehr gut Raster erstellen, die sich automatisch an alle Viewportgrößen anpassen, die Spaltenzahl wird dabei nach Bedarf ermittelt. Dabei werden die Elemente automatisch auf das Raster verteilt in der Reihenfolge, in der sie im Quellcode stehen. Keine Rasterzelle wird dabei ausgelassen. Was macht man, wenn aber genau das gewünscht ist? Also:

  • ein flexibles responsives Raster
  • mit Lücken
  • aber ohne Media Queries

Die Lösung besteht darin, dass man mit verschachtelten CSS-Grids arbeitet. Bei dem Element, vor dem eine Rasterzelle frei sein soll, definiert man, dass sich das Element über zwei Rasterzellen erstrecken soll, außerdem macht man das Element selbst zu einem Gridcontainer (display: grid) und platziert den eigentlichen Inhalt in der zweiten Rasterzelle.

Von Anfang an. Ich verwende folgenden HTML-Code – eine ungeordnete Liste mit Bildern. Die Elemente, vor denen eine Rasterzelle frei sein soll, erhalten eine zusätzliche Klasse (davorfrei):

<ul>
<li><img src="" alt="Platzhalterbild">
<li><img src="" alt="Platzhalterbild">
<li class="davorfrei"><img src="" alt="Platzhalterbild">
<!-- usw. -->
</ul>

Das ul-Element wird zum Gridcontainer.

ul {
display: grid;

Dann kommt die Rasterdefinition: Der Browser soll automatisch die Anzahl an Spalten ermitteln, die mindestens 200px breit sein sollen und maximal einen Teil des verfügbaren Platzes einnehmen. Die Anzahl der Zeilen darf der Browser selbst festlegen, sie sollen 200px hoch sei.

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 200px;

Damit es keine Lücken gibt, verwende ich dense, außerdem gibt es ein bisschen Abstand zwischen den Rasterzellen:

grid-auto-flow: dense;
grid-gap: 2em;
}

Soweit alles normal. Jetzt kommen die besonderen Angaben, um Rasterzellen frei zu lassen. Das entsprechende Element soll sich über zwei Rasterzellen erstrecken (grid-column: span 2). Außerdem wird es selbst zum Gridcontainer und ich definiere ein Raster mit zwei Spalten:

.davorfrei {
grid-column: span 2;
display: grid;
grid-template-columns: repeat(2, minmax(200px, 1fr));
grid-gap: inherit;
}

Das Bild soll immer in der zweiten Spalte des inneren Rasters platziert werden (dadurch ist die erste Spalte frei):

.davorfrei img {
grid-column: 2;
}

Das vollständige Beispiel gibt es unter Flexibles Raster mit Lücken zum Ansehen.

Außerdem habe ich eine zweite Variante mit Custom Properties erstellt (Flexibles Raster mit Lücken+ Custom Properties): Hier kann man die Anzahl der freien Spalten über Variablen festlegen (anzahl bezeichnet die Gesamtspalten des inneren Rasters, die Zahl ist also um 1 höher als die Rasterzellenzahl, die frei sein soll) und auch die optimale Größe der Bilder kann mithilfe von Custom Properties global gesteuert werden.

Beide Beispiele gibt es inzwischen – Dank an Jens Grochtdreis ! – auch bei Codepen: https://codepen.io/jensgro/pen/zyGPaV/ und die Custom-Property-Variante: https://codepen.io/jensgro/pen/roVYqg

Noch ein Hinweis: Wenn weniger als ca. 500px zur Verfügung stehen, wird die zweite Spalte mit dem Bild schmaler. Das liegt daran, dass es ja Elemente gibt, die sich über zwei Rasterzellen erstrecken – und damit kann das Raster nicht schmaler als zwei Rasterzellen werden. Bei Bedarf könnte man hier mit MQ natürlich Sonderangaben für kleine Viewports definieren.

3 Antworten zu “CSS Grid: Automatisches responsives Raster mit Lücken”

  1. Danke für den Artikel. Ich habe Dein Beispiel mal in Codepen überführt, damit man mit dem Code noch einfacher experimentieren kann: https://codepen.io/jensgro/pen/zyGPaV/

  2. Das Beispiel mit den Custom Properties habe ich auch nach Codepen transportiert: https://codepen.io/jensgro/pen/roVYqg