En CSS Grid, las propiedades grid-template-columns
y grid-template-rows
te permiten definir nombres de líneas y hacer un seguimiento del tamaño de las columnas y filas de la cuadrícula, respectivamente. La compatibilidad con la interpolación para estas propiedades permite que los diseños de cuadrícula realicen transiciones fluidas entre estados, en lugar de ajustarse en la mitad de una animación o transición.
Navegadores compatibles
Interpolación de valores en CSS
En CSS, puedes realizar transiciones suaves de propiedades de un valor a otro con la propiedad transition
.
#target {
opacity: 0.5;
transition: opacity ease-in-out 0.25s;
}
#target:hover {
opacity: 1;
}
El motor de renderización detectará automáticamente el tipo de valor de la propiedad objetivo y usará esa información para realizar la transición sin problemas al nuevo valor.
Por ejemplo:
- ¿Se está realizando la transición de
opacity
de0
a1
? Eso es una interpolación numérica. - ¿Se está realizando la transición de
background-color
dewhite
ablack
? Desvanece entre los colores de origen y destino. - ¿Quieres migrar
width
? Realiza una interpolación numérica y convierte las unidades a lo largo del proceso si es necesario.
Lo mismo se aplica a las animaciones de CSS, en las que el navegador realizará la interpolación de valores entre fotogramas clave.
Anima grid-template-columns
y grid-template-rows
Los diseños de cuadrícula también pueden realizar transiciones fluidas entre estados, en lugar de ajustarse en la mitad de una animación o transición.
En la siguiente demostración, una cuadrícula muestra varios avatares. Para ahorrar espacio, los avatares se superponen limitándose el ancho de cada columna con grid-template-columns
. Cuando colocas el cursor sobre una columna, se le asigna más espacio.
.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);
}
Con la propiedad transition
en su lugar, la cuadrícula interpola sin problemas entre los valores.
El efecto también se aplica a las animaciones que cambian los valores de grid-template-columns
o grid-template-rows
.