Esta publicación explica el procedimiento completo para agregar el espacio entre columnas en Tailwind.
¿Cómo agregar espacio entre columnas en Tailwind?
Para agregar el espacio entre las columnas en Tailwind, use el ' espacio-{tamaño} ' utilidad. Especifica un valor entero que representa el espacio entre las columnas horizontal y verticalmente. Hagamos esta tarea de manera práctica con la ayuda de los ejemplos indicados.
Estructura del archivo del proyecto
El ' espacio-{tamaño} La utilidad ” se puede implementar en cualquiera de los proyectos de Tailwind que siguen la estructura de archivos dada:
Comencemos con el primer ejemplo.
Ejemplo 1: use la utilidad 'gap-{size}' para agregar el mismo espacio entre filas y columnas
Este ejemplo aplica la utilidad “gap-{size}” para agregar el mismo espacio horizontal y verticalmente entre las columnas dadas.
código HTML
Descripción general del siguiente código:
< cabeza >
< enlace href = '/dist/output.css' real = 'hoja de estilo' >
< / cabeza >
< cuerpo >
< h1 clase = 'texto-3xl fuente-negrita texto-centro subrayado texto-naranja-600' > ¡Bienvenido a Linuxhint! < / h1 >< hermano >
< división clase = 'mx-2 cuadrícula cuadrícula-cols-3 brecha-4' >
< división clase = 'borde-2 borde-naranja-600' > Primer tutorial < / división >
< división clase = 'borde-2 borde-naranja-600' > Segundo Tutorial < / división >
< división clase = 'borde-2 borde-naranja-600' > Tercer Tutorial < / división >
< división clase = 'borde-2 borde-naranja-600' > Cuarto Tutorial < / división >
< división clase = 'borde-2 borde-naranja-600' > Quinto Tutorial < / división >
< división clase = 'borde-2 borde-naranja-600' > Sexto Tutorial < / división >
< división clase = 'borde-2 borde-naranja-600' > Séptimo Tutorial < / división >
< división clase = 'borde-2 borde-naranja-600' > Octavo Tutorial < / división >
< / división >
En las líneas de código anteriores:
- Primero, vincula el archivo CSS principal “ /dist/output.css ” con el archivo HTML existente “ índice.html ' utilizando el '
” etiqueta en la sección “cabeza”. - A continuación, la sección 'cuerpo' crea un elemento '
' que utiliza el ' Tamaño de fuente ”, “ Peso de fuente ”, “ Texto alineado ”, “ Decoración de texto ', y el ' Color de texto Clases de viento de cola, respectivamente.
- Después de eso, se agrega un elemento “” que aplica el “ red ” utilidad para establecer su contenido en el número indicado de diseños de cuadrícula, el “ margen ” clase para establecer el margen horizontal, y el “ brecha ” utilidad para agregar el espacio especificado entre columnas.
- En la sección del cuerpo del elemento “
”, se incluyen otros ocho elementos “” que utilizan el “ Ancho del borde ' y el ' Color del borde ” clases, respectivamente.Producción
Ejecute el código HTML anterior en el servidor en vivo y analice la salida:
Como se ve, la salida agrega el espacio especificado entre columnas en ambas dimensiones de manera adecuada.
Ejemplo 2: use la utilidad 'gap-{size}' para agregar un espacio entre filas y columnas de forma independiente
El ' espacio-{tamaño} La utilidad ” también se puede implementar con dimensiones “x(horizontal)” e “y(vertical)” como “brecha-x-{tamaño}” para filas y “brecha-y-{tamaño}” para columnas para agregar el brecha entre ellos individualmente.Veamos su implementación práctica.
código HTML
< cabeza >
Echa un vistazo al código dado:
< enlace href = '/dist/output.css' real = 'hoja de estilo' >
< / cabeza >
< cuerpo >
< división clase = 'mx-2 cuadrícula cuadrícula-cols-4 brecha-x-4 brecha-y-6' >
< división clase = 'borde-2 borde-naranja-600' >primer tutorial< / división >
< división clase = 'borde-2 borde-naranja-600' >Segundo Tutorial< / división >
< división clase = 'borde-2 borde-naranja-600' >Tercer Tutorial< / división >
< división clase = 'borde-2 borde-naranja-600' >Cuarto Tutorial< / división >
< división clase = 'borde-2 borde-naranja-600' >Quinto Tutorial< / división >
< división clase = 'borde-2 borde-naranja-600' >Sexto Tutorial< / división >
< división clase = 'borde-2 borde-naranja-600' >Séptimo Tutorial< / división >
< división clase = 'borde-2 borde-naranja-600' >Octavo Tutorial< / división >
< / división >
< cuerpo >Aquí el ' brecha-x-{tamaño} La utilidad ” agrega el espacio entre las filas y el “ brecha-y-{tamaño} ” agrega el espacio especificado entre las columnas de forma independiente.
Producción
El resultado anterior verifica que la brecha entre filas y columnas se aplica en consecuencia.
Conclusión
'Tailwind CSS' proporciona un ' espacio-{tamaño} ” utilidad para agregar el espacio entre las columnas. También se puede usar para agregar el espacio entre filas y columnas por separado mediante el botón ' brecha-x-{tamaño} ' y el ' brecha-y-{tamaño} ” utilidades. Esta publicación proporcionó el procedimiento completo para agregar el espacio entre columnas en Tailwind.
- En la sección del cuerpo del elemento “