Layouts de grade animada em CSS

Bramus

Na grade CSS, as propriedades grid-template-columns e grid-template-rows permitem definir nomes de linhas e acompanhar o dimensionamento de colunas e linhas da grade, respectivamente. Com a interpolação dessas propriedades, os layouts de grade podem fazer uma transição suave entre os estados, em vez de se ajustar no meio de uma animação ou transição.

Browser Support

• 107
• 107
• 66
• 16

Interpolação de valores em CSS

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

Exemplo:

• Transição de opacity de 0 para 1? Essa é uma interpolação numérica.
• Transição de background-color de white para black? Esmaecer entre as cores de origem e de destino.
• Está fazendo a transição para 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 frames-chave.

Observação : ao usar propriedades personalizadas, use @property para indicar o tipo delas. Dessa forma, o navegador sabe como fazer a transição de um valor para o outro.

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

Os layouts de grade também podem fazer uma transição suave entre os estados, em vez de se ajustar no meio 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 uns sobre os outros, limitando a largura de cada coluna usando grid-template-columns. Ao passar o cursor, cada coluna ganha 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 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.