Wie erstelle ich mit CSS-Raster Spalten gleicher Breite, unabhängig von der Inhaltsgröße?

Spalten gleicher Breite mit CSS-Raster erstellen

Sie möchten untergeordnete Elemente innerhalb eines Zeilenelements unabhängig davon in einer gleichen Anzahl von Spalten anzeigen die Anzahl der Kinder. Während Flexbox dies problemlos erreichen kann, stellt CSS Grid eine andere Herausforderung dar. Dieser Artikel bietet eine Lösung, um dies mithilfe von CSS Grid zu erreichen.

Lösung

Der erste übliche Versuch besteht darin, „repeat(3, 1fr)“ als Wert für das Raster zu verwenden -template-columns-Eigenschaft. Allerdings berechnet 1fr die Platzverteilung basierend auf dem verfügbaren Platz. Diese Einschränkung ist problematisch, wenn der Inhalt die Spurgröße überschreitet. Dadurch wird ein Überlaufen der Spalten verhindert und ihre Breite entsprechend angepasst. Teilspalten mit abgeschnittenem Inhalt können ungleich werden.

Um eine exakte Gleichheit der Spaltenbreite sicherzustellen, sollten Sie die folgende Regel verwenden:

<code class="css">grid-template-columns: repeat(3, minmax(0, 1fr));</code>

minmax(0, 1fr) gibt an, dass Rasterspuren dies können haben eine Mindestgröße von 0 und eine beliebige Maximalgröße von 1 Fr. Dadurch wird sichergestellt, dass die Spalten immer die gleiche Breite haben und Inhalte aufnehmen können, die die Spurgröße überschreiten.

Beachten Sie, dass die Aktivierung des Inhaltsüberlaufs je nach Standardverhalten des Browsers, Inhaltsgröße usw. zu unterschiedlichen visuellen Ergebnissen führen kann verfügbaren Platz. Das in der Frage bereitgestellte Beispiel veranschaulicht den Unterschied zwischen den beiden Ansätzen: Repeat(3, 1fr) versus Repeat(3, minmax(0, 1fr)).

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS-Raster Spalten gleicher Breite, unabhängig von der Inhaltsgröße?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!