Wie erstelle ich unabhängig vom Inhalt gleich große CSS-Rasterspalten?

Gleich große CSS-Rasterspalten

Viele Programmierer stehen vor der Herausforderung, gleich breite Spalten in CSS-Rasterlayouts zu erreichen. Während Flexbox diese Aufgabe vereinfacht, kann dies auch mit CSS Grid erreicht werden.

Der gebräuchlichste Ansatz ist die Verwendung der Funktion „repeat()“, wie in „grid-template-columns“: „repeat(3, 1fr);“ . Allerdings kann diese Abkürzung problematisch sein, wenn der Inhalt die Spurgröße überschreitet, da sie nur den verfügbaren Platz verteilt. Um unabhängig von der Inhaltsgröße die gleiche Breite sicherzustellen, verwenden Sie die folgende Syntax:

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

Die Eigenschaft minmax() ermöglicht, dass Spuren so klein wie 0 und so groß wie 1 Fr sind, wodurch Spalten gleicher Größe gewährleistet werden. Beachten Sie jedoch, dass dies zu Überläufen führen kann, wenn der Inhalt zu groß ist oder nicht verpackt werden kann.

Hier ist ein Beispiel, das den Unterschied veranschaulicht:

• repeat(3, 1fr): If Der Inhalt überschreitet die Spurgröße, Spalten können ungleichmäßige Breiten haben.
• repeat(3, minmax(0, 1fr)): Spalten bleiben immer gleich breit, es können jedoch Überläufe auftreten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich unabhängig vom Inhalt gleich große CSS-Rasterspalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!