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