En Tailwind CSS, el intervalo de filas hace que un elemento ocupe dos o más filas dentro de la cuadrícula. Se utiliza para definir el número de filas que debe ocupar/abarcar un elemento. Permite a los usuarios ajustar el tamaño y la posición del elemento de la cuadrícula en varias filas y crear diferentes diseños. Además, se puede utilizar para crear diseños de cuadrícula flexibles y receptivos para páginas web.
Este artículo ejemplificará el método para hacer un intervalo de filas en Tailwind CSS.
¿Cómo hacer un tramo de filas en Tailwind?
Para hacer que las filas se extiendan en Tailwind, cree un programa HTML. Luego, utilice el “ rango-fila-
Para una implementación práctica, consulte los pasos proporcionados:
Paso 1: hacer un rango de columnas en el programa HTML
Cree un programa HTML y use el ' rango-fila-
< cuerpo >
< división clase = 'grid grid-rows-4 grid-flow-col gap-3 m-3 text-center' >
< división clase = 'row-span-3 bg-teal-500 p-5' > 1 < / división >
< división clase = 'bg-teal-500 p-5' > 2 < / división >
< división clase = 'row-span-2 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 = 'row-span-4 bg-teal-500 p-5' > 6 < / división >
< / división >
< / cuerpo >
Aquí, en el elemento padre
- “ red La clase ” se utiliza para crear un diseño de cuadrícula.
- “ rejilla-fila-4 La clase ” establece el número de filas en la cuadrícula en 4.
- “ 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.
En los elementos secundarios
- “ fila-span-3 La clase especifica que el elemento debe abarcar 3 filas en la cuadrícula.
- “ rango-fila-2 La clase ” indica que el elemento debe abarcar 2 filas en la cuadrícula.
- “ fila-span-4 La clase ” especifica que el elemento debe abarcar 4 filas en la cuadrícula.
- “ bg-teal-500 La clase ” establece el color verde azulado en el fondo del elemento 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
Vea la página web HTML para verificar si el rango de filas se ha aplicado o no:
En el resultado anterior, se puede observar que el intervalo de filas se ha aplicado con éxito de acuerdo con lo que se especificó.
Conclusión
Para hacer que las filas se extiendan en Tailwind, use el ' rango-fila-
” en el programa HTML y especifique el número de filas que debe abarcar cada elemento. Para verificación, vea los cambios en la página web HTML. Este artículo ha ejemplificado el método para hacer un intervalo de filas en Tailwind CSS.