Este artículo ejemplificará el método para aplicar puntos de interrupción y consultas de medios en la cuadrícula de filas en Tailwind CSS.
¿Cómo aplicar puntos de interrupción y consultas de medios en la cuadrícula de filas en Tailwind?
Para aplicar puntos de interrupción y consultas de medios en la cuadrícula de filas en Tailwind, cree un programa HTML. Luego, defina el número de filas para varios tamaños de pantalla usando el botón “ SM ”, “ Maryland ' o ' lg ” puntos de ruptura con el “ cuadrícula-filas-
Exploremos la implementación práctica:
Paso 1: use puntos de interrupción y consultas de medios con cuadrícula de filas en el programa HTML
Cree un programa HTML y defina el número de filas para diferentes tamaños de pantalla con el ' cuadrícula-filas-
< cuerpo >
< división clase = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col 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í:
- “ red La clase ” se utiliza para crear un diseño de cuadrícula.
- “ rejilla-filas-2 La clase ” especifica que la cuadrícula debe tener 2 filas del mismo tamaño.
- “ md:cuadrícula-filas-3 La clase ” cambia la cuadrícula en 3 filas del mismo tamaño en una pantalla de tamaño mediano.
- “ lg:cuadrícula-filas-5 La clase ” cambia la cuadrícula en 5 filas del mismo tamaño en el tamaño de pantalla grande.
- “ cuadrícula-flujo-col La clase ” coloca los elementos de la cuadrícula horizontalmente en columnas.
- “ 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.
- “ 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 del niño
elementos.
Paso 2: Verificar salida
Para asegurarse de que los puntos de interrupción y las consultas de medios se hayan aplicado en la cuadrícula de filas, vea la página web HTML cambiando el tamaño de la pantalla:
En el resultado anterior, se puede ver que el número de filas cambia con el tamaño de la pantalla. Esto indica que los puntos de interrupción y las consultas de medios se han aplicado correctamente en la cuadrícula de filas.
Conclusión
Para aplicar puntos de interrupción y consultas de medios en la cuadrícula de filas en Tailwind, defina la cantidad de filas para varios tamaños de pantalla usando el ' SM ”, “ Maryland ' o ' lg ” puntos de ruptura con el “ cuadrícula-filas-
” utilidades. Luego, asegúrese de realizar cambios en la página web cambiando el tamaño de la pantalla. Este artículo ha ejemplificado el método para aplicar puntos de interrupción y consultas de medios en la cuadrícula de filas en Tailwind CSS.