Me complace arrojar luz sobre el hecho de que el CSS grid-template-rows y grid-template-columns las propiedades son ahora animable en todos los principales navegadores web! Bueno, CSS Grid ha soportado técnicamente animaciones durante mucho tiempo, ya que es horneado directamente en la especificación de nivel 1 del módulo de diseño de cuadrícula CSS.

Pero la animación de estas propiedades de la cuadrícula solo recientemente obtuvo el soporte de los tres navegadores principales. ¿Vamos a echar un vistazo a algunos ejemplos para que fluya la creatividad?

Ejemplo 1: barra lateral desplegable

En primer lugar, esto es de lo que estamos hablando:

Una cuadrícula simple de dos columnas. Ahora, antes, podrías no He creado esto usando CSS Grid porque las animaciones y las transiciones no eran compatibles, pero ¿qué pasaría si quisiera que la columna izquierda, tal vez una barra de navegación lateral, se expandiera al pasar el mouse? Bueno, ahora eso es posible.

Sé lo que estás pensando: “¿Animar una propiedad CSS? ¡Fácil, lo he estado haciendo durante años!” Yo también. Sin embargo, me encontré con un inconveniente interesante mientras experimentaba con un caso de uso particular.

Entonces, queremos hacer la transición de la cuadrícula en sí (específicamente grid-template-columns, que se establece en el .grid clase en el ejemplo). Pero la columna de la izquierda (.left) es el selector que requiere el :hover pseudo-clase. Si bien JavaScript puede resolver este problema fácilmente (gracias, pero no, gracias), podemos lograrlo solo con CSS.

Repasemos todo, comenzando con el HTML. Cosas bastante estándar realmente... una cuadrícula con dos columnas.

<div class="grid"> <div class="left"></div> <div class="right"></div>
</div>

Dejando a un lado el CSS cosmético, primero deberá configurar display: grid en el contenedor principal (.grid).

.grid { display: grid;
}

A continuación, podemos definir y dimensionar las dos columnas usando el grid-template-columns propiedad. Haremos que la columna de la izquierda sea súper estrecha y luego aumentaremos su ancho al pasar el mouse. La columna de la derecha ocupa el resto del espacio restante, gracias a la auto palabra clave.

.grid { display: grid; grid-template-columns: 48px auto;
}

Sabemos que vamos a animar esta cosa, así que sigamos adelante y lancemos un transition allí mientras estamos en eso para que el cambio entre estados sea suave y notable.

.grid { display: grid; grid-template-columns: 48px auto; transition: 300ms; /* Change as needed */
}

Eso es todo para el .grid! Todo lo que queda es aplicar el estado de desplazamiento. Específicamente, vamos a anular el grid-template-columns propiedad para que la columna de la izquierda ocupe una mayor cantidad de espacio al pasar el mouse.

Esto por sí solo no es tan interesante, aunque es increíble que las animaciones y las transiciones ahora sean compatibles con CSS Grid. Lo que es más interesante es que podemos usar el relativamente nuevo :has() pseudoclase para diseñar el contenedor principal (.grid) mientras el niño (.left) está suspendido.

.grid:has(.left:hover) { /* Hover styles */
}

En lenguaje sencillo esto está diciendo, “Haz algo a la .grid contenedor si contiene un elemento llamado .left dentro de él que está en un estado de flotación”. Es por eso que :has() se refiere a menudo como un selector "principal". Finalmente podemos seleccionar un padre en función de los niños que contiene, ¡no se requiere JavaScript!

Por lo tanto, vamos a aumentar el ancho de la .left columna a 30% cuando se cierne. Él .right columna seguirá ocupando todo el espacio sobrante:

.grid { display: grid; transition: 300ms; grid-template-columns: 48px auto;
} .grid:has(.left:hover) { grid-template-columns: 30% auto;
}

También podríamos usar variables CSS, que pueden verse más limpias o no según sus preferencias personales (o podría estar usando variables CSS en su proyecto de todos modos):

.grid { display: grid; transition: 300ms; grid-template-columns: var(--left, 48px) auto;
} .grid:has(.left:hover) { --left: 30%;
}

I amar que las cuadrículas CSS se pueden animar ahora, pero el hecho de que podamos construir este ejemplo en particular con solo nueve líneas de CSS es aún más asombroso.

Aquí hay otro ejemplo de olivia ng — concepto similar, pero con contenido (haga clic en el icono de navegación):

Ejemplo 2: Paneles de expansión

Este ejemplo cambia el contenedor de cuadrícula (los anchos de columna) pero también las columnas individuales (sus colores de fondo). Es ideal para proporcionar más contenido al pasar el mouse.

Vale la pena recordar que el repeat() La función a veces produce transiciones con errores, por lo que configuro el ancho de cada columna individualmente (es decir, grid-template-columns: 1fr 1fr 1fr).

Ejemplo 3: agregar filas y columnas

Este ejemplo "agrega" animadamente una columna a la cuadrícula. Sin embargo, lo adivinó, este escenario también tiene una trampa. El requisito es que la columna "nueva" no debe ocultarse (es decir, establecerse en display: none), y CSS Grid debe reconocer su existencia mientras establece su ancho en 0fr.

Entonces, para una cuadrícula de tres columnas: grid-template-columns: 1fr 1fr 0fr (sí, la unidad debe declararse aunque el valor sea 0!) transiciones a grid-template-columns: 1fr 1fr 1fr correctamente, pero grid-template-columns: 1fr 1fr no. En retrospectiva, esto tiene mucho sentido teniendo en cuenta lo que sabemos sobre cómo funcionan las transiciones.

Aquí hay otro ejemplo de michelle barker — mismo concepto, pero con una columna adicional y montón más dinamismo. Asegúrese de ejecutar este en modo de pantalla completa porque en realidad responde (sin engaños, ¡solo un buen diseño!).

Algunos ejemplos más

¿Porque, porque no?

Este "Mondrian animado" es la prueba de concepto original para cuadrículas CSS animadas por Chrome DevRel. grid-row'S y grid-columnes utilizar el span palabra clave para crear el diseño que ve ante usted, y luego el grid-template-rowy grid-template-columnestán animados usando una animación CSS. ¡No es tan complejo como parece!

El mismo concepto, pero con más dinamismo de Michelle Barker. ¿Podría hacer una buena ruleta de carga?

Terminando con un poco de nostalgia (mostrando mi edad aquí), la cuadrícula CSS animada no muy cuadriculada de andres harvard. Nuevamente, el mismo concepto, es solo que no puede ver los otros elementos de la cuadrícula. Pero no te preocupes, están ahí.

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
• Fuente: https://css-tricks.com/animating-css-grid-how-to-examples/