tricks - usar css grid




Linhas de altura iguais no layout de grade CSS (2)

Resposta curta

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

  • Definir o contêiner 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 unidade fr . Ele é projetado para distribuir o espaço livre no contêiner e é algo análogo à propriedade flex-grow no flexbox.

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

grid-auto-rows: 1fr;

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

Não faz sentido off-the-bat porque fr deveria distribuir o espaço livre. E se várias linhas tiverem conteúdo com alturas diferentes, quando o espaço for distribuído, algumas linhas serão proporcionalmente menores e mais altas.

Exceto , enterrado nas profundezas da grade está essa pequena pepita:

fr fr

...

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

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

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

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

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

A altura máxima dessas linhas se torna o comprimento de 1fr .

É assim que o 1fr cria linhas de altura iguais em um contêiner de grade.

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

Conforme observado na pergunta, linhas de altura iguais 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.

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

6. Linhas Flexíveis

Em um contêiner flexível de 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 contêiner flexível baseado em linha, a altura de cada linha (o "tamanho cruzado") é a altura mínima necessária para conter os itens flexíveis na linha.

Eu entendo que isso é impossível de se conseguir usando o Flexbox, já que cada linha só pode ter a altura mínima necessária para encaixar seus elementos, mas isso pode ser conseguido usando o mais novo CSS Grid?

Para ser claro, 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 as células de sua linha.






css-grid