Este artículo demostrará el método para aplicar el efecto de desplazamiento en la cuadrícula de columnas en Tailwind CSS.
¿Cómo aplicar Hover en Column Grid en Tailwind?
Para aplicar el efecto de desplazamiento en la cuadrícula de columnas en Tailwind, cree un archivo HTML y use el ' flotar ” clase con el “ grid-cols-
Siga los pasos proporcionados para la implementación práctica:
Paso 1: use la propiedad Hover con la cuadrícula de columnas en el programa HTML
Cree un programa HTML y use el ' flotar ” propiedad con el “ grid-cols-
< cuerpo >
< división clase = 'cuadrícula grid-cols-3 hover:grid-cols-5 gap-3 m-3 text-center' >
< división clase = 'bg-teal-500 p-5' > 1 < / división >
< división clase = 'bg-teal-500 p-5' > 2 < / división >
< división clase = 'bg-teal-500 p-5' > 3 < / división >
< división clase = 'bg-teal-500 p-5' > 4 < / división >
< división clase = 'bg-teal-500 p-5' > 5 < / división >
< división clase = 'bg-teal-500 p-5' > 6 < / división >
< división clase = 'bg-teal-500 p-5' > 7 < / división >
< división clase = 'bg-teal-500 p-5' > 8 < / división >
< división clase = 'bg-teal-500 p-5' > 9 < / división >
< división clase = 'bg-teal-500 p-5' > 10 < / división >
< / división >
< / cuerpo >
Aquí, en el elemento padre
- “ red La clase ” se utiliza para crear un diseño de cuadrícula.
- “ grid-cols-3 La clase ” especifica que la cuadrícula debe tener 3 columnas del mismo tamaño.
- “ flotar: grid-cols-5 La clase ” especifica que la cuadrícula debe cambiarse en 5 columnas del mismo tamaño cuando se pasa el mouse sobre ella.
- “ brecha-3 La clase ” establece un espacio de 3 unidades entre cada elemento de la cuadrícula.
- “ m-3 La clase ” aplica un margen de 3 unidades alrededor del contenedor de cuadrícula.
- “ centro de texto La clase ” establece el texto de cada elemento de la cuadrícula en el centro.
En los elementos secundarios
- “ ” representa el número de elementos de la cuadrícula.
- “ bg-teal-500 La clase ” establece el color verde azulado en el fondo de los elementos de la cuadrícula.
- “ p-5 La clase ” agrega un relleno de 5 unidades al contenido dentro de los elementos secundarios
.Paso 2: Verificar salida
Para asegurarse de que el efecto de desplazamiento se haya aplicado en la cuadrícula de columnas, vea la página web y mueva el mouse sobre los elementos de la cuadrícula:
Se puede ver que cuando el mouse pasa sobre el elemento de la cuadrícula, el número de columnas cambia. Indica que el efecto de desplazamiento se ha aplicado con éxito en la rejilla de la columna.
Conclusión
Para aplicar el efecto de desplazamiento en la cuadrícula de columnas en Tailwind, utilice el botón ' flotar ” clase con el “ grid-cols-
” utilidad en el programa HTML. Cambia el número de columnas al pasar el mouse. Para garantizar los cambios, vea la página web HTML y desplace el mouse sobre los elementos de la cuadrícula. Este artículo ha demostrado el método para aplicar el efecto de desplazamiento en la cuadrícula de columnas en Tailwind CSS.