Linhas de altura igual no layout de grade CSS

Percebi que isso é impossível de se conseguir usando o Flexbox, já que cada linha pode ter apenas a altura mínima necessária para ajustar seus elementos, mas isso pode ser alcançado usando o CSS Grid mais recente?

Para ser claro, eu quero altura igual para todos os elementos em uma grade em todas as linhas, não apenas para cada linha. Basicamente, a "célula" mais alta deve ditar a altura de todas as células, não apenas das células em sua linha.

Resposta curta

Se o objetivo é criar uma grade com linhas de altura igual, onde a célula mais alta na grade define a altura de todas as linhas, aqui está uma solução rápida e simples:

• Defina o recipiente para grid-auto-rows: 1fr

Como funciona

O Layout de grade fornece uma unidade para estabelecer comprimentos flexíveis em um contêiner de grade. Esta é a frunidade. Ele é projetado para distribuir espaço livre no contêiner e é um tanto análogo à flex-growpropriedade do flexbox.

Se você definir todas as linhas em um contêiner de grade como 1fr, digamos assim:

grid-auto-rows: 1fr;

... então todas as linhas terão a mesma altura.

Realmente não faz sentido de imediato porque frdeve distribuir o espaço livre. E se várias linhas tiverem conteúdo com alturas diferentes, então quando o espaço for distribuído, algumas linhas serão proporcionalmente menores e mais altas.

Exceto , enterrado profundamente nas especificações da grade está esta pequena pepita:

7.2.3. Comprimentos flexíveis: a fr unidade

...

Quando o espaço disponível é infinito (o que acontece quando a largura ou altura do contêiner da grade é indefinida), as frfaixas de grade flex-sized ( ) são dimensionadas para seu conteúdo, mantendo suas respectivas proporções.

O tamanho usado de cada faixa de grade de tamanho flexível é calculado determinando o max-contenttamanho de cada faixa de grade de tamanho flexível e dividindo esse tamanho pelo respectivo fator de flexibilidade para determinar um “ 1fr tamanho hipotético ”.

O máximo deles é usado como o 1frcomprimento resolvido (a fração flexível), que é então multiplicado pelo fator de flexibilidade de cada trilha da grade para determinar seu tamanho final.

Portanto, se estou lendo isso corretamente, ao lidar com uma grade de tamanho dinâmico (por exemplo, a altura é indefinida), as trilhas da grade (linhas, neste caso) são dimensionadas para seu conteúdo.

A altura de cada linha é determinada pelo max-contentitem de grade mais alto ( ).

A altura máxima dessas linhas passa a ser o comprimento de 1fr.

É assim que 1frcria linhas de altura igual em um contêiner de grade.

Por que o flexbox não é uma opção

Conforme observado na pergunta, filas de altura igual não são possíveis com o flexbox.

Os itens flexíveis podem ter a mesma altura na mesma linha, mas não em várias linhas.

Este comportamento é definido na especificação do flexbox:

6. Flex Lines

Em um contêiner flexível com várias linhas, o tamanho cruzado de cada linha é o tamanho mínimo necessário para conter os itens flexíveis na linha.

Em outras palavras, quando há várias linhas em um flex container baseado em linha, a altura de cada linha (o "tamanho cruzado") é a altura mínima necessária para conter os flex items na linha.

A resposta curta é que a configuração grid-auto-rows: 1fr;no contêiner da grade resolve o que foi perguntado.

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