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
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 de0
para1
? Essa é uma interpolação numérica.- Fazendo a transição do
background-color
dowhite
para oblack
? 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
.