Der Unterschied zwischen Prozent- und fr-Einheiten im CSS-Rasterlayout

Beim Konfigurieren eines Rasterlayouts mit CSS kann sich die Wahl der Einheiten zur Angabe der Spalten- und Zeilengr??en auf die auswirken Verhalten des Layouts. Zwei h?ufig verwendete Einheiten sind Prozents?tze und Brucheinheiten (fr). Lassen Sie uns die Hauptunterschiede zwischen diesen Einheiten im Kontext des CSS-Rasterlayouts untersuchen.

fr-Einheiten

Die fr-Einheit stellt Brucheinheiten des freien Speicherplatzes dar, der im Rastercontainer nach Berücksichtigung von Rasterlücken verfügbar ist . Im Wesentlichen erm?glicht es, dass Spalten oder Zeilen einen proportionalen Anteil des verbleibenden Platzes einnehmen. Der freie Speicherplatz wird gleichm??ig auf die Spalten oder Zeilen mit fr-Werten verteilt.

Dadurch wird sichergestellt, dass die Gr??e der Elemente mit der Gr??en?nderung des Rastercontainers reagiert. Rasterlücken, definiert durch Rasterspaltenlücke und Rasterzeilenlücke, werden vom verfügbaren Platz abgezogen, bevor die fr-Werte berechnet werden.

Prozentsatzeinheiten

Prozentsatzeinheiten hingegen Geben Sie die Breite von Spalten oder Zeilen als Prozentsatz des gesamten Rastercontainers einschlie?lich Rasterlücken an. Dies bedeutet, dass die Gr??en der Elemente fest sind und sich nicht dynamisch an die Gr??e des Containers anpassen.

Daher kann es vorkommen, dass die Gesamtbreite der Spalten, einschlie?lich der Rasterlücken, zu gro? wird. überschreitet die Breite des Gittercontainers. Dies kann dazu führen, dass das Layout den Container überfüllt.

Beispiel

Um den Unterschied im Verhalten zu veranschaulichen, betrachten Sie das folgende Rasterlayout:

.grid {
  display: grid;
  grid-template-columns: repeat(12, calc(100% / 12));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

In diesem Fall Prozentsatz Einheiten werden verwendet, um die Spaltenbreiten zu definieren. Infolgedessen überschreitet die Gesamtbreite der Spalten, einschlie?lich der Rasterlücken (11 Lücken mit einer Lücke von 10 Pixeln), die Breite des Rastercontainers, was zu einem überlaufen des Layouts führt.

Wenn wir jedoch auf ?using“ umsteigen stattdessen fr-Einheiten:

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

Die Spalten nehmen jetzt proportionale Mengen des verfügbaren freien Speicherplatzes ein, und die Gitterlücken werden vom Gesamtplatz abgezogen, bevor die fr-Werte berechnet werden. Dadurch entsteht ein responsives Layout, das sich dynamisch an die Gr??e des Grid-Containers anpasst.

Fazit

Die Auswahl der passenden Einheit für Ihr Grid-Layout h?ngt vom gewünschten Verhalten ab. Prozenteinheiten eignen sich, wenn Sie feste Gr??en wünschen, w?hrend fr-Einheiten von Vorteil sind, wenn Sie reaktionsf?hige Layouts ben?tigen, die entsprechend dem verfügbaren Platz skaliert werden. Das Verst?ndnis der Unterschiede zwischen diesen Einheiten und ihrer Auswirkungen auf das Layout ist entscheidend für die Erstellung effizienter und optisch ansprechender CSS-Grid-Layouts.

Das obige ist der detaillierte Inhalt vonCSS-Rasterlayout: Prozents?tze vs. ?fr'-Einheiten – Was ist der Unterschied?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!