Einführung in CSS Grid: minmax, auto-fill und auto-fit

In diesem Artikel gehen wir wieder zurück zum Grid-Container. Im echten Leben reicht ein automatischer Raster, der alles in gleich breite Spalten aufteilt, manchmal nicht aus.

Mein HTML besteht aus einem Container und vier Grid-Elementen.

<div class="grid-container">
 <div class="grid-element">Eins</div>
 <div class="grid-element">Zwei</div>
 <div class="grid-element">Drei</div>
 <div class="grid-element">Vier</div>
</div>

Daraus baue ich einen 4-spaltigen Raster.

.grid-container{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap:20px;
}

Der Browser bekommt damit die Anweisung, den Platz im Viewport für alle vier Spalten gleichmäßig aufzuteilen. Jede Spalte kriegt genau einen Teil (fraction) vom zur Verfügung stehenden freien Platz.

Das sieht schön ordentlich aus.

See the Pen CSS Grid 2 Spalten by Kirsten (@netzialist) on CodePen.light

Was passiert, wenn eine der Spalten einen längeren Satz enthält? Dann sieht es nicht mehr so gut aus.

See the Pen CSS Grid langer Text by Kirsten (@netzialist) on CodePen.light

Der Text in der dritten Spalte hätte gern etwas mehr Platz in der Breite. Das kann ich umsetzen, indem ich eine minimale Breite für die Spalten definiere. Eine Spalte soll mindestens 250px breit sein, damit der Satz besser reinpasst. Maximale Breite soll 1fr sein, also die gesamte Breite des Viewports.

grid-template-columns: repeat(4,minmax(250px,1fr));

Ups, das klappt noch nicht ganz wie gewünscht. Die Spalten laufen jetzt aus dem Viewport raus.

See the Pen CSS Grid auto-fit minmax by Kirsten (@netzialist) on CodePen.light

Damit das nicht passiert, setze ich das Keyword auto-fit ein. Jetzt funktioniert der Raster wie gewünscht.

grid-template-columns: repeat(auto-fit,minmax(250px,1fr));

See the Pen CSS-Grid autofit by Kirsten (@netzialist) on CodePen.light

auto-fit nimmt die zur Verfügung stehenden Spalten und sorgt dafür, dass sie in den verfügbaren freien Platz passen. Ist der Platz aufgebraucht, umbrechen die Spalten.

Auto-fit und auto-fill

Neben auto-fit gibt es noch das Keyword auto-fill. Auf den ersten Blick lösen beide Keywords ein ähnliches Verhalten aus. Aber auto-fill macht Folgendes: Alle Spalten bleiben in der minimalen Breite von 250px, wenn der Viewport breiter wird. Der Rest des Platzes wird mit weiteren (leeren) Spalten gefüllt. auto-fit passt dagegen die Breite der Spalten der Breite des Viewport an.

auto-fit (oben) vs auto-fill (unten)

Ich habe noch keinen Anwendungsfall für auto-fill gefunden.
Damit bin ich nicht allein. In dem (sehr lesenswerten) Artikel „Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit“ auf CSS-Tricks stellt sich Sara Soueidan dieselbe Frage.

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.