Layouts de grade animada em CSS

No CSS Grid, as propriedades grid-template-columns e grid-template-rows permitem definir nomes de linhas e rastrear o tamanho das colunas e linhas da grade, respectivamente. O suporte à interpolação para essas propriedades permite que os layouts de grade façam transições suaves entre estados, em vez de fixar no ponto intermediário de uma animação ou transição.

Compatibilidade com navegadores

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

Interpolação de valores no CSS

No CSS, é possível fazer transições suaves de 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 vai detectar automaticamente o tipo do valor da propriedade segmentada e usar essas informações para fazer a transição suave para o novo valor.

Exemplo:

  • opacity está em transição de 0 para 1? Essa é uma interpolação numérica.
  • background-color está em transição de white para black? Desvanecer entre as cores de origem e de destino.
  • Transição width? Interpolar numericamente, convertendo unidades ao longo do caminho, se necessário.

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

Animar grid-template-columns e grid-template-rows

Os layouts de grade também podem fazer transições suaves entre estados, em vez de ajustar no ponto intermediário de uma animação ou transição.

Na demonstração a seguir, uma grade mostra vários avatares. Para economizar espaço, os avatares são dispostos um sobre o outro, 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 em vigor, a grade interpola suavemente entre os valores.

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