Layouts de grade animados em CSS

Na grade CSS, as propriedades grid-template-columns e grid-template-rows permitem definir nomes de linhas e rastrear o dimensionamento das colunas e linhas da grade, respectivamente. O suporte à interpolação para essas propriedades permite que os layouts de grade façam uma transição suave entre estados, em vez de ajustar no ponto médio de uma animação ou transição.

Bramus (em inglês)

Interpolação de valor no CSS

No CSS, é possível fazer a transição das propriedades de um valor para outro usando a propriedade transition.

#target {
  opacity: 0.5;
  transition: opacity ease-in-out 0.25s;
}

#target:hover {
  opacity: 1;
}

O mecanismo de renderização detectará automaticamente o tipo de valor da propriedade segmentada e usará essas informações para fazer a transição suave para o novo valor.

Exemplo:

• Fazendo a transição do opacity do 0 para o 1? Essa é uma interpolação numérica.
• Fazendo a transição do background-color do white para o black? Esmaecer entre as cores de origem e de destino.
• Está fazendo a transição de width? Faça a interpolação numérica, convertendo unidades ao longo do caminho, se necessário.

O mesmo se aplica a animações CSS, em que o navegador faz a interpolação de valor entre frames-chave.

Interpolação de grid-template-columns e grid-template-rows

Graças aos nossos colaboradores da Microsoft, o Chrome (a partir da versão 107) consegue interpolar os valores grid-template-columns e grid-template-rows.

Os layouts de grade podem fazer uma transição suave entre estados, em vez de ajustar na metade de uma animação ou transição.

Na demonstração abaixo, uma grade mostra vários avatares. Para economizar espaço, os avatares são dispostos uns sobre os outros limitando a largura de cada coluna usando grid-template-columns. Ao passar o cursor, cada coluna recebe mais espaço.

.avatars {
  display: grid;
  gap: 0.35em;

  grid-auto-flow: column;
  grid-template-columns: repeat(4, 2em);
  transition: all ease-in-out 0.25s;
}

.avatars:hover {
  grid-template-columns: repeat(4, 4em);
}

Com a propriedade transition, a grade alterna suavemente entre os valores.

O efeito também se aplica a animações que mudam os valores grid-template-columns ou grid-template-rows.

Parte da série Newly interoperável (em inglês)