Layouts de grade animada em CSS

Bramus

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.

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 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.
• Fazendo a transição do background-color do white para o black? Desvanecer entre as cores de origem e de destino.
• width em transição? 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 uma transição suave entre estados, em vez de serem ajustados no ponto médio 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 grid-template-columns ou grid-template-rows.