CSS grid repeat
repeat wiederholt Angaben kurz und bündig, legt die Zahl der Zeilen oder Spalten fest, und kann sowohl mit Schlüsselwörtern also auch mit Funktionen gesteuert werden.
grid-template-columns: repeat(2, 60px 3fr) 120px;
|--------+--------| |
| |
Wiederhole 2x 5. Spalte
60px 3fr feste Breite
/* Drei Zeilen, jeweils 120px hoch */ grid-template-rows: repeat(3, 120px); /* 2 mal Spalten abwechselnd 60px und 4fr breit und die letzte Spalte 200px breit */ grid-template-columns: repeat(2, 60px 3fr) 120px;
Wird der Grid-Container vergrößert oder verkleinert, bleiben die Spalten mit der festen Spaltenbreite von 60px fixiert, die Spalten mit 3fr wachsen oder schrumpfen entsprechend.
grid minmax
Eine weitere CSS-Funktion von CSS Grid ist minmax. Die Werte in den runden Klammern der minmax-Funktion geben eine minimale und maximale Breite / Höhe an, zwischen denen die Spaltenbreite / Zeilenhöhe variieren kann. minmax erspart Media Queries und verhindert Sprünge zwischen den Breakpoints.
+-- maximale Breite
|
minmax(200px,300px)
|
+-- minimale Breite
/** Erste Spalte 200 bis 300px breit, zweite Spalte 125px, dritte und vierte Spalte zwischen 100 und 200px **/ grid-template-columns: minmax(200px,300px) 125px repeat(2, minmax(100px,200px)); /** Drei Zeilen von je 150px Höhe **/ grid-template-rows: repeat(3, 150px);
Grid auto-fit und auto-fill
Die Schlüsselwörter auto-fit und auto-fill der CSS-repeat-Funktion tragen ebenfalls dazu bei, Seiten mit weniger Media Queries responsive zu gestalten. Wenn repeat() mit auto-fit oder auto-fill eingesetzt wird, erzeugt der Grid-Container so viele Grid-Tracks (column / rows) wie in den Container passen, ob die Grid-Items existieren oder nicht.
Weil grid-template-rows: repeat(2, 200px) sozusagen sklavische eingehalten wird, haben wir also immer zwei Zeilen.
auto-fit packt die Spalten in das verfügbare Platzangebot, auto-fill fügt neue Spalten hinzu, selbst wenn sie leer bleiben.
grid-template-columns: repeat(2, minmax(200px, 1fr));
grid-template-rows: repeat(2, 200px);
Mit größerem bzw. kleinerem Platzangebot wachsen bzw. schrumpfen die Spalten, aber die minimale Breite der Spalten ist 200px. Wird der verfügbare Platz noch kleiner, fallen die Spalten sozusagen aus dem Rahmen.
grid-template-rows: repeat(2, 200px);
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
Mit grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) nutzt der Grid-Container ein wachsendes Platzangebot für weitere Spalten. Auf kleinen Viewports bekommen die Grid-Spalten eine minimale Breite von 200px ohne Scrollleisten, mit einem größeren Platzangebot werden weitere Spalten für die Grid-Items eingesetzt.
auto-fit
auto-fit passt die Grid-Items an, so dass sie den verfügbaren Raum ausfüllen, oder anders ausgedrückt: auto-fill füllt den gesamten Grid-Container.
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-rows: repeat(3, 150px);
