Tailwind CSS ofrece un sistema de cuadrícula que permite a los usuarios dividir la página web en columnas y filas utilizando las utilidades grid-cols y grid-rows. También proporciona las utilidades de inicio y final de la columna de la cuadrícula para controlar el tamaño y la ubicación de los elementos en las columnas de la cuadrícula. Estas utilidades permiten a los usuarios especificar las posiciones inicial y final de un elemento dentro del diseño de cuadrícula.
Este artículo explicará el método para hacer que las columnas comiencen o terminen en la enésima línea de cuadrícula específica en Tailwind CSS.
¿Cómo hacer que las columnas comiencen o terminen en la n-ésima línea de cuadrícula en Tailwind?
Para hacer que las columnas comiencen o terminen en la n-ésima línea de cuadrícula en Tailwind, utilice el ' col-inicio-
Paso 1: Especifique las posiciones inicial y final de los elementos de la cuadrícula en el programa HTML
Haga un programa HTML y use el ' col-inicio-
< cuerpo >
< h1 clase = 'texto-2xl texto-centro' >
Tailwind CSS - Comienzo de columna / Fin
h1 >
< división clase = 'rejilla rejilla-cols-4 gap-3 m-3' >
< división clase = 'col-start-2 col-span-2 bg-verde azulado-500 p-5' > 1 división >
< división clase = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 división >
< división clase = 'col-inicio-3 col-fin-5 bg-verde azulado-500 p-5' > 3 división >
< división clase = 'col-start-2 col-span-3 bg-verde azulado-500 p-5' > 4 división >
< división clase = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 división >
división >
cuerpo >
Aquí, en el elemento padre
- “ red ” se utiliza para crear un diseño de cuadrícula.
- “ grid-cols-4 La clase ” especifica que la cuadrícula debe tener 4 columnas del mismo tamaño.
- “ brecha-3 La clase ” establece un espacio de 3 unidades entre cada elemento de la cuadrícula.
- “ m-3 La clase ” agrega un margen de 3 unidades alrededor del contenedor de cuadrícula.
En los elementos del niño interno
- “ col-start-2 La propiedad ” especifica que el elemento de la cuadrícula comienza en la columna 2.
- “ col-span-2 ” indica que el elemento de la cuadrícula ocupa 2 columnas.
- “ col-start-1 ” se utiliza para iniciar el elemento de cuadrícula desde la columna 1.
- “ col-extremo-3 ” especifica que el elemento de la cuadrícula termina en la columna 3.
- “ col-start-3 ” indica que el elemento de la cuadrícula comienza en la segunda columna.
- “ col-end-5 La propiedad ” finaliza el elemento de cuadrícula en la columna 5.
- “ col-span-3 ” especifica que el elemento de la cuadrícula ocupa 3 columnas.
- “ bg-teal-500 ” establece el color verde azulado en el fondo de todos los elementos de la cuadrícula.
- “ p-5 ” agrega un relleno de 5 unidades al contenido dentro de los elementos de la cuadrícula.
Paso 2: Verificar salida
Para asegurarse de que se han aplicado las posiciones inicial y final de la columna de la cuadrícula, consulte la página web HTML:
El resultado anterior indica que las posiciones inicial y final de la columna de la cuadrícula se han aplicado correctamente según lo especificado.
Conclusión
Para hacer que las columnas comiencen o terminen en la n-ésima línea de cuadrícula en Tailwind, el ' col-inicio-