Ich stelle fest, dass dies mit Flexbox nicht möglich ist, da jede Zeile nur die minimale Höhe haben kann, die zum Anpassen ihrer Elemente erforderlich ist. Kann dies jedoch mit dem neueren CSS-Raster erreicht werden?
Um es klar auszudrücken, möchte ich für alle Elemente in einem Raster über alle Zeilen hinweg die gleiche Höhe, nicht nur für jede Zeile. Grundsätzlich sollte die höchste "Zelle" die Höhe aller Zellen bestimmen, nicht nur der Zellen in ihrer Reihe.
Antworten:
Wenn das Ziel darin besteht, ein Raster mit Zeilen gleicher Höhe zu erstellen, in dem die höchste Zelle im Raster die Höhe für alle Zeilen festlegt, finden Sie hier eine schnelle und einfache Lösung:
grid-auto-rows: 1frDas Rasterlayout bietet eine Einheit zum Festlegen flexibler Längen in einem Rastercontainer. Dies ist die frEinheit. Es dient zur Verteilung des freien Speicherplatzes im Container und entspricht in etwa der flex-growEigenschaft in der Flexbox.
Wenn Sie alle Zeilen in einem Rastercontainer auf festlegen 1fr, sagen wir Folgendes:
grid-auto-rows: 1fr;... dann sind alle Zeilen gleich hoch.
Es macht auf Anhieb keinen Sinn, weil fres freien Speicherplatz verteilen soll. Und wenn mehrere Zeilen Inhalte mit unterschiedlichen Höhen haben, sind bei verteilter Fläche einige Zeilen proportional kleiner und höher.
Außer , dass tief in der Gitterspezifikation dieses kleine Nugget vergraben ist:
7.2.3. Flexible Längen: das
frGerät...
Wenn der verfügbare Platz unendlich ist (was passiert, wenn die Breite oder Höhe des Gittercontainers unbestimmt ist), werden
frGitterspuren mit flexibler Größe ( ) auf ihren Inhalt zugeschnitten, wobei ihre jeweiligen Proportionen beibehalten werden.Die verwendete Größe jeder Gitterbahn mit Flexgröße wird berechnet, indem die
max-contentGröße jeder Gitterbahn mit Flexgröße bestimmt und diese Größe durch den jeweiligen Flexfaktor dividiert wird, um eine „hypothetische1frGröße“ zu bestimmen .Das Maximum davon wird als aufgelöste
1frLänge (der Flex-Anteil) verwendet, die dann mit dem Flex-Faktor jeder Gitterbahn multipliziert wird, um ihre endgültige Größe zu bestimmen.
Wenn ich dies richtig lese, werden Rasterspuren (in diesem Fall Zeilen) beim Umgang mit einem Raster mit dynamischer Größe (z. B. die Höhe ist unbestimmt) auf ihren Inhalt zugeschnitten.
Die Höhe jeder Zeile wird durch das höchste ( max-content) Rasterelement bestimmt.
Die maximale Höhe dieser Zeilen entspricht der Länge von 1fr.
Auf diese Weise 1frwerden Zeilen gleicher Höhe in einem Rastercontainer erstellt.
Wie in der Frage erwähnt, sind Reihen gleicher Höhe mit der Flexbox nicht möglich.
Flex-Elemente können in derselben Zeile gleich hoch sein, jedoch nicht über mehrere Zeilen hinweg.
Dieses Verhalten ist in der Flexbox-Spezifikation definiert:
In einem mehrzeiligen Flex-Container ist die Kreuzgröße jeder Linie die Mindestgröße, die erforderlich ist, um die Flex-Elemente in der Linie aufzunehmen.
Mit anderen Worten, wenn sich in einem zeilenbasierten Flex-Container mehrere Linien befinden, ist die Höhe jeder Linie (die "Kreuzgröße") die Mindesthöhe, die erforderlich ist, um die Flex-Elemente in der Linie aufzunehmen.
Die kurze Antwort lautet: Die Einstellung grid-auto-rows: 1fr;im Rastercontainer löst die Fragen .