Wiersze o jednakowej wysokości w układzie siatki CSS

Rozumiem, że jest to niemożliwe do osiągnięcia za pomocą Flexbox, ponieważ każdy wiersz może mieć tylko minimalną wysokość wymaganą do dopasowania jego elementów, ale czy można to osiągnąć za pomocą nowszej siatki CSS?

Żeby było jasne, chcę mieć równą wysokość dla wszystkich elementów w siatce we wszystkich wierszach, a nie tylko w każdym wierszu. Zasadniczo najwyższa „komórka” powinna określać wysokość wszystkich komórek, a nie tylko komórek w swoim rzędzie.

Krótka odpowiedź

Jeśli celem jest utworzenie siatki z rzędami o jednakowej wysokości, w której najwyższa komórka w siatce ustawia wysokość dla wszystkich wierszy, oto szybkie i proste rozwiązanie:

• Ustaw pojemnik na grid-auto-rows: 1fr

Jak to działa

Układ siatki zapewnia jednostkę do ustalania elastycznych długości w kontenerze siatki. To jest frjednostka. Jest przeznaczony do dystrybucji wolnej przestrzeni w kontenerze i jest nieco analogiczny do flex-growwłaściwości we flexboxie.

Jeśli ustawisz wszystkie wiersze w kontenerze siatki na 1fr, powiedzmy w ten sposób:

grid-auto-rows: 1fr;

... wtedy wszystkie wiersze będą miały taką samą wysokość.

To naprawdę nie ma sensu od razu, ponieważ frma rozdzielać wolne miejsce. A jeśli zawartość kilku rzędów ma różną wysokość, to po rozłożeniu przestrzeni niektóre wiersze będą proporcjonalnie mniejsze i wyższe.

Z wyjątkiem tego , że głęboko w specyfikacji siatki jest ten mały samorodek:

7.2.3. Elastyczne długości: fr jednostka

...

Gdy dostępna przestrzeń jest nieskończona (co ma miejsce, gdy szerokość lub wysokość pojemnika siatki jest nieokreślona), frścieżki siatki o rozmiarze flex ( ) są dopasowywane do ich zawartości, zachowując odpowiednie proporcje.

Użyty rozmiar każdej ścieżki siatki o rozmiarze flex jest obliczany poprzez określenie max-contentrozmiaru każdej ścieżki siatki o rozmiarze flex i podzielenie tego rozmiaru przez odpowiedni współczynnik flex w celu określenia „hipotetycznego 1fr rozmiaru”.

Maksymalna z nich jest używana jako 1frustalona długość (ułamek giętki), która jest następnie mnożona przez współczynnik flex każdej ścieżki siatki, aby określić jej ostateczny rozmiar.

Tak więc, jeśli dobrze to czytam, gdy mam do czynienia z siatką o rozmiarze dynamicznym (np. Wysokość jest nieokreślona), ścieżki siatki (w tym przypadku wiersze) są dopasowywane do ich zawartości.

Wysokość każdego wiersza jest określana przez najwyższy ( max-content) element siatki.

Maksymalna wysokość tych wierszy staje się długością 1fr.

W ten sposób 1frtworzy wiersze o równej wysokości w kontenerze siatki.

Dlaczego flexbox nie wchodzi w grę

Jak wspomniano w pytaniu, rzędy o jednakowej wysokości nie są możliwe w przypadku Flexbox.

Elementy Flex mogą mieć taką samą wysokość w tym samym wierszu, ale nie w wielu wierszach.

To zachowanie jest zdefiniowane w specyfikacji flexbox:

6. Linie Flex

W wieloliniowym kontenerze elastycznym rozmiar krzyża każdej linii jest minimalnym rozmiarem niezbędnym do umieszczenia elementów elastycznych w linii.

Innymi słowy, jeśli w kontenerze elastycznym opartym na wierszach znajduje się wiele wierszy, wysokość każdego wiersza („rozmiar krzyżyka”) jest minimalną wysokością niezbędną do umieszczenia elementów elastycznych w wierszu.

Krótka odpowiedź jest taka, że ​​ustawienie grid-auto-rows: 1fr;kontenera siatki rozwiązuje to, o co pytano.

https://codepen.io/Hlsg/pen/EXKJba