Die berühmteste Codezeile, die bisher aus CSS Grid hervorgegangen ist, lautet
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));Ohne Media Queries wird ein Grid-Container eingerichtet, der eine flexible Anzahl von Spalten hat. Die Spalten dehnen sich ein wenig aus, bis genügend Platz für eine weitere vorhanden ist, und dann wird eine neue Spalte hinzugefügt, und umgekehrt.
Die einzige Schwäche hierbei ist der erste Wert in minmax() (der obige 10rem-Wert). Wenn der Container schmaler ist als dieses Minimum, werden die Elemente in dieser einzelnen Spalte überlaufen. Evan Minto zeigt uns die Lösung mit min()
grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));Die Browserunterstützung ist noch nicht weit verbreitet, aber Evan demonstriert einige progressive Enhancement-Techniken, die man jetzt nutzen kann.
Es sollte wahrscheinlich eine einfachere, kürzere Syntax für diesen gängigen Anwendungsfall geben. Vielleicht in Grid Layout Level 2…
Interessant, aber ich bin mir ziemlich sicher, dass ich nicht der Einzige bin, der das Gefühl hat, dass "Die einzige Schwäche hierbei ist der erste Wert in minmax() (der obige 10rem-Wert)" wirklich *nicht* die einzige Schwäche dieser Technik ist.
Vielmehr ist es die unvermeidliche Zeilenstart-Begründung der letzten Zeilen-Grid-Elemente (die letzte Zeile wird nie zentriert, es sei denn, sie ist voll) – denken Sie an eine Galerie. Dieses Problem wird im verlinkten Artikel nicht richtig dargestellt, da die bereitgestellte Grafik bequem eine perfekt gefüllte letzte Zeile zeigt, was aber oft nicht der Fall ist. Wie hier: https://codepen.io/mikegleeson/pen/EqmWPm
Ich hätte gerne etwas in Grid, das irgendwie 'weiß', dass die letzte Zeile zentriert sein sollte. Da dies eher eine Sache von Flexbox ist und irgendwie gegen die Prinzipien von Grid verstößt, bin ich etwas skeptisch, ob dies mit einer unbestimmten Anzahl von Zeilen und Elementen in der letzten Zeile machbar ist, aber ich bin dennoch hoffnungsvoll.
Außerdem sollte für die meisten Anwendungsfälle wahrscheinlich auto-fit und nicht auto-fill gewählt werden.