Wie kann ein CSS-Raster Zeilen mit gleicher Höhe erreichen, wo Flexbox versagt?

Zeilen gleicher Höhe im CSS-Rasterlayout: Eine bessere Möglichkeit

Während Flexbox nicht in allen Zeilen Zeilen gleicher Höhe aufnehmen kann, bietet CSS Grid eine Lösung. Durch die Nutzung der fr-Einheit können Sie diesen Effekt mühelos erzielen.

Wie Rasterlayout-Magie entsteht

Im CSS-Rasterlayout bezeichnet die fr-Einheit eine flexible Länge, die den freien Platz innerhalb eines Rastercontainers verteilt . Das Setzen aller Zeilen auf 1fr führt zu Zeilen mit gleicher Höhe.

Der Zauber liegt jedoch in der Definition von fr. In Fällen, in denen die Höhe des Rastercontainers unbestimmt ist, passen sich Fr-Spuren (in diesem Fall Zeilen) an die Höhe ihres Inhalts an.

Der höchste Inhalt im Raster bestimmt die maximale Inhaltshöhe, die die Länge von 1fr annimmt. Daher erstellt 1fr automatisch Zeilen gleicher Höhe, indem es die Höhe der höchsten „Zelle“ im Raster widerspiegelt.

Warum Flexbox zu kurz kommt

Flexbox ist zwar nützlich für Zeilen gleicher Höhe in derselben Zeile , stockt über mehrere Zeilen. Gemäß der Flexbox-Spezifikation reicht die Höhe jeder Zeile nur aus, um die Flex-Elemente in dieser Zeile aufzunehmen. Diese Einschränkung verhindert zeilenübergreifend gleich hohe Zeilen.

Das obige ist der detaillierte Inhalt vonWie kann ein CSS-Raster Zeilen mit gleicher Höhe erreichen, wo Flexbox versagt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!