CSS-Rasterlayout: Prozentsätze vs. „fr'-Einheiten – Was ist der Unterschied?

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!