Wie kann das CSS-Rasterlayout Zeilen gleicher Höhe erreichen, während Flexbox dies nicht kann?

Erstellen gleichhoher Zeilen im CSS-Rasterlayout

Im Bereich des HTML- und CSS-Layouts ist das Erreichen gleichhoher Zeilen ein Muss gemeinsame Herausforderung. Bisher war dies mit Flexbox aufgrund der zeilenbasierten Höhenberechnung, bei der jede Zeile durch ihr höchstes Element bestimmt wurde, nicht möglich. Das Aufkommen von CSS Grid Layout bietet jedoch eine vielseitige Lösung für dieses Problem.

Lösung: CSS Grid Layout mit 1fr-Einheiten

Der Schlüssel zur Schaffung gleicher Höhe Zeilen in einem Raster besteht darin, die 1fr-Einheit für die Eigenschaft „grid-auto-rows“ zu verwenden. Diese Einheit steht für „Fractional Unit“ und stellt eine flexible Länge innerhalb des Grid-Containers dar.

<br>grid-auto-rows: 1fr;<br>

Indem wir die Eigenschaft „grid-auto-rows“ für alle Zeilen auf 1fr setzen, weisen wir den Browser an, den verfügbaren vertikalen Platz gleichmäßig auf sie zu verteilen. Dies führt dazu, dass alle Zeilen die gleiche Höhe haben.

So funktioniert es

Die Magie hinter 1fr liegt in seiner Fähigkeit, basierend auf dem darin enthaltenen Inhalt zu wachsen und zu schrumpfen die Gitterzellen. Wenn der Container eine unbestimmte Höhe hat, wie es bei dynamischen Layouts häufig der Fall ist, werden die Rasterspuren (in unserem Fall die Reihen) automatisch in der Größe angepasst, um den höchsten Inhalt aufzunehmen.

Die maximale Höhe der Reihen wird das Äquivalent von 1fr, das dann mit dem zugewiesenen 1fr-Wert multipliziert wird, um die endgültige Höhe jeder Zeile zu bestimmen. Im Wesentlichen erben alle Zeilen die Höhe der höchsten Zeile.

Warum Flexbox keine praktikable Option ist

Im Gegensatz zum Rasterlayout bietet Flexbox keine Möglichkeit um Reihen gleicher Höhe über mehrere Zeilen hinweg zu erstellen. Gemäß der Flexbox-Spezifikation ist die Quergröße (Höhe) jeder Zeile auf die kleinste Höhe beschränkt, die für den Inhalt erforderlich ist.

Dieses Verhalten macht es unmöglich, mit Flexbox allein den gewünschten Effekt zu erzielen. Nur CSS Grid Layout bietet die Flexibilität und Funktionalität, die für Zeilen gleicher Höhe in allen Zeilen in einem Raster erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie kann das CSS-Rasterlayout Zeilen gleicher Höhe erreichen, während Flexbox dies nicht kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!