Kurze Antwort
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:
- Stellen Sie den Container auf
grid-auto-rows: 1fr
Wie es funktioniert
Das 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 fr
Gerä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 „hypothetische 1fr
Größ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.
Warum Flexbox keine Option ist
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:
6. Flex Lines
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.
