Erreichen von Spalten der gleichen Breite in CSS Grid

können bei der Arbeit mit CSS Grid, wenn Elemente gleichmäßig über Kolumnen verteilt werden, kann eine Herausforderung sein. Während Flexbox einen einfachen Ansatz bietet, erfordert das Erreichen des gleichen Ergebnisses mit CSS-Netz eine etwas mehr Überlegung. Arbeit. "

Antwort:

Die allgemein vorgeschlagene Lösung von Wiederholung (3, 1fr) ist nicht ganz korrekt. Wie in der Antwort angegeben:

"1fr geht es um die Verteilung des verfügbaren (!) Raums. Dies bricht, sobald der Inhalt größer wird als die Trackgröße." , um die Kolumnen zu gewährleisten, um ihre gleiche Breite zu behalten, wird empfohlen, minmax (0, 1fr) zu verwenden. minmax (0, 1fr));

minmax (0, 1fr) ermöglicht es, Raster -Tracks so klein wie 0 und 1FR zu sein. Dies stellt sicher, dass Spalten die gleichen Breiten beibehalten. Dieser Ansatz kann jedoch den Inhaltsüberlauf verursachen, wenn er die Breite der Spalte überschreitet.

für eine visuelle Demonstration des Unterschieds zwischen diesen Ansätzen, betrachten Sie das folgende Beispiel:

grid-template-columns: repeat(3, minmax(0, 1fr));