CSS-Raster: Prozentsätze vs. „fr'-Einheiten: Welche sollte ich verwenden?

Prozentsatz vs. Fr-Einheiten im CSS-Rasterlayout

Fr-Einheiten verstehen

Funktion:Fr-Einheiten weisen freien Speicherplatz innerhalb zu ein Container.

Berechnung: Freier Speicherplatz (nach Subtrahieren Gitterlücken) wird gleichmäßig auf die Fr-Spalten aufgeteilt.

Prozentsatz (%)-Einheiten verstehen

Funktion: Definiert Spaltenbreiten als Prozentsatz der Containerbreite.

Berechnung: Die Spaltenbreite wird ermittelt, indem die Gesamtbreite durch die Anzahl der Spalten, einschließlich der Breiten, geteilt wird von etwaigen Gitterlücken.

Der Unterschied: Überlauf vs. Verteilung

Prozentsatz:Spalten können aufgrund fester Einheitslängen und Gitterlücken außerhalb der Containerbreite überlaufen.

Fr: Spalten nehmen nur freien Platz innerhalb des Containers ein und erstrecken sich nicht darüber hinaus. Gitterlücken wirken sich nicht auf die Zuweisung von freiem Speicherplatz aus.

Prozentsatz mit Gitterlücken verwenden

Um einen Überlauf bei prozentualen Breiten zu vermeiden, subtrahieren Sie die Gesamtbreite der Gitterlücken von der vollen Containerbreite, bevor Sie sie durch dividieren Anzahl der Spalten:

grid-template-columns: repeat(12, calc(8.3333% - 9.1667px))

wobei:

• 8,3333 % ist die prozentuale Breite jeder Spalte ohne Lücken
• 9,1667px ist die Gesamtbreite von 11 Rasterlücken (jeweils 10px)

Durch die Verwendung geeigneter Werte für prozentuale Breiten oder die Implementierung von fr-Einheiten, Sie können die Spaltengröße verwalten und einen Überlauf im CSS-Rasterlayout verhindern.

Das obige ist der detaillierte Inhalt vonCSS-Raster: Prozentsätze vs. „fr'-Einheiten: Welche sollte ich verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!