Startseite >CSS >Modernes CSS >Responsives Grid ohne Media Queries

Responsives Grid ohne Media Queries

Produktkarten oder eine Galerie mit vier Spalten auf einem breiten Monitor, drei auf einem Tablet und einer auf dem Handy – ohne eine einzige Media Query. Es genügt eine Zeile CSS mit repeat, auto-fill und minmax. Wie das funktioniert, worin sich auto-fill von auto-fit unterscheidet und wie Sie eine Fotogalerie bauen.

Eine Zeile statt Media Queries

<div class="products">
  <div class="product">Kaffee</div>
  <div class="product">Tee</div>
  <div class="product">Kakao</div>
  <div class="product">Limonade</div>
  <div class="product">Wasser</div>
  <div class="product">Saft</div>
</div>

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

Ergebnis

Kaffee

Tee

Kakao

Limonade

Wasser

Saft

Die Deklaration liest man am besten von innen: Jede Spalte ist mindestens 200 px und höchstens 1fr (ein Bruchteil des freien Platzes) breit. auto-fill legt so viele Spalten an, wie bei 200 px einschließlich der Abstände hineinpassen, und verteilt den übrigen Platz auf sie. Die Zahl der Spalten bestimmt also die Breite des Containers:

Breite des Containers	Spalten	Breite der Spalte
1000 px	4	238 px
700 px	3	etwa 222,7 px
450 px	2	217 px
360 px	1	360 px

Anders als beim Umbruch in Flexbox sind alle Spalten gleich breit, und die Karten in der letzten Zeile bleiben an den anderen ausgerichtet. Ändern Sie die Breite des Fensters – das Ergebnis oben ändert die Zahl der Spalten von selbst.

auto-fill oder auto-fit?

.products {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Ergebnis

auto-fill

Kaffee

Tee

auto-fit

Kaffee

Tee

Der Unterschied zeigt sich erst, wenn es weniger Karten gibt, als Spalten hineinpassen. auto-fill lässt die übrigen Spalten leer, die Karten bleiben also so breit wie in einem vollen Raster und links ausgerichtet. auto-fit lässt die leeren Spalten zusammenfallen, und die Karten strecken sich über die volle Breite. Zwei Karten in einem 1000 px breiten Container sind mit auto-fill je 238 px und mit auto-fit je 492 px breit.

Ein Container schmaler als eine Spalte

Ist der Container schmaler als das Minimum der Spalte, schrumpft die Spalte nicht, und die Karte läuft aus dem Container heraus. Das passiert zum Beispiel bei Karten mit einem Minimum von 300 px auf einem Handy, das für den Inhalt nur 288 px hat. Die Absicherung ist die Funktion min(): Die Spalte ist mindestens 200 px breit, aber nie breiter als der ganze Container.

.products {
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}

Eine Galerie mit gleichem Seitenverhältnis

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: 8px;
}
.gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

aspect-ratio: 4 / 3 gibt allen Bildern dasselbe Seitenverhältnis, unabhängig von den Maßen des Fotos.
object-fit: cover vergrößert oder verkleinert das Foto so, dass es den ganzen Rahmen ausfüllt, und schneidet den überstehenden Teil ab. Das Foto wird nicht verzerrt, auch wenn ein Hochformat in einem Rahmen im Querformat steht.
display: block entfernt die Lücke unter dem Bild – ein Bild ist sonst ein Inline-Element, und unter ihm bleibt Platz für Buchstaben wie „g“ und „p“.