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 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 de0
para1
? Essa é uma interpolação numérica.background-color
está em transição dewhite
parablack
? 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
.