Erzielen gleichbreiter Spalten im CSS-Raster
Beim Arbeiten mit CSS-Raster kann es eine Herausforderung sein, Elemente gleichmäßig auf die Spalten zu verteilen. Während Flexbox einen unkomplizierten Ansatz bietet, erfordert das Erreichen des gleichen Ergebnisses mit CSS Grid etwas mehr Überlegung.
Ursprüngliche Frage:
„Ich möchte Elemente in einem anzeigen Zeile in Spalten gleicher Breite, unabhängig von der Anzahl der untergeordneten Elemente innerhalb der Zeile. Ich habe versucht, CSS Grid zu verwenden, aber ich habe Probleme damit, dass es funktioniert 🎜>
Die häufig vorgeschlagene Lösung von „repeat(3, 1fr)“ ist nicht ganz korrekt. Wie in der Antwort angegeben:„Bei 1fr geht es um die Verteilung des verfügbaren(!) Speicherplatzes. Dies wird unterbrochen, sobald der Inhalt größer als die Spurgröße wird.“
Um sicherzustellen, dass die Spalten erhalten bleiben Bei gleicher Breite wird empfohlen, stattdessen minmax(0, 1fr) zu verwenden:minmax(0, 1fr) ermöglicht, dass Rasterspuren so klein wie 0 und so groß wie 1fr sind. Dadurch wird sichergestellt, dass die Spalten die gleiche Breite behalten. Dieser Ansatz kann jedoch zu einem Inhaltsüberlauf führen, wenn er die Spaltenbreite überschreitet.
Um den Unterschied zwischen diesen Ansätzen visuell zu veranschaulichen, betrachten Sie das folgende Beispiel:
<code class="css">grid-template-columns: repeat(3, minmax(0, 1fr));</code>
Mit wiederholen(3 , 1fr) passen die Spalten ihre Breite basierend auf dem verfügbaren Platz an, was möglicherweise zu unterschiedlichen Breiten führt. Durch die Verwendung von „repeat(3, minmax(0, 1fr))“ wird jedoch sichergestellt, dass alle drei Spalten unabhängig von der Inhaltsgröße genau die gleiche Breite haben.
Das obige ist der detaillierte Inhalt vonWie erreicht man im CSS-Raster unabhängig von der Inhaltsgröße gleich breite Spalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
