Comment ajouter un espace entre les colonnes dans Tailwind

Comment Ajouter Un Espace Entre Les Colonnes Dans Tailwind



' CSS vent arrière ' offre un intégré utile ' colonnes-{count} ” utilitaire qui ajuste le contenu de l'élément HTML spécifié sous forme de colonnes. Il spécifie essentiellement le nombre de colonnes, c'est-à-dire un entier positif. Par défaut, il n'y a pas d'espace entre les colonnes. Cependant, il peut être ajouté à l'aide du ' écart-{taille} ” utilitaire qui ajoute automatiquement l'espace entre les lignes et les colonnes dans Tailwind.

Cet article détaille la procédure complète pour ajouter l'espace entre les colonnes dans Tailwind.

Comment ajouter un espace entre les colonnes dans Tailwind ?

Pour ajouter l'espace entre les colonnes dans Tailwind, utilisez le ' écart-{taille} ' utilitaire. Il spécifie une valeur entière qui représente l'écart entre les colonnes horizontalement et verticalement. Faisons cette tâche pratiquement à l'aide des exemples indiqués.







Structure du fichier de projet
Le ' écart-{taille} ” peut être implémenté dans n'importe quel projet Tailwind qui suit la structure de fichier donnée :





Commençons par le premier exemple.





Exemple 1 : Utiliser l'utilitaire 'gap-{size}' pour ajouter le même espace entre les lignes et les colonnes
Cet exemple applique l'utilitaire 'gap-{size}' pour ajouter le même espace horizontalement et verticalement entre les colonnes données.

Code HTML
Présentation du code suivant :



< diriger >
< lien href = '/dist/sortie.css' rel = 'feuille de style' >
< / diriger >
< corps >
< h1 classe = 'text-3xl font-bold text-center underline text-orange-600' > Bienvenue sur Linuxhint ! < / h1 >< Br >
< div classe = 'mx-2 grille grille-cols-3 écart-4' >
< div classe = 'bordure-2 bordure-orange-600' > Premier tutoriel < / div >
< div classe = 'bordure-2 bordure-orange-600' > Deuxième tutoriel < / div >
< div classe = 'bordure-2 bordure-orange-600' > Troisième tutoriel < / div >
< div classe = 'bordure-2 bordure-orange-600' > Quatrième Tutoriel < / div >
< div classe = 'bordure-2 bordure-orange-600' > Cinquième tutoriel < / div >
< div classe = 'bordure-2 bordure-orange-600' > Sixième tutoriel < / div >
< div classe = 'bordure-2 bordure-orange-600' > Septième tutoriel < / div >
< div classe = 'bordure-2 bordure-orange-600' > Huitième Tutoriel < / div >
< / div >

Dans les lignes de code ci-dessus :

  • Tout d'abord, liez le fichier CSS principal ' /dist/sortie.css ' avec le fichier HTML existant ' index.html ' en utilisant le ' » dans la section « head ».
  • Ensuite, la section 'body' crée un élément '

    ' qui utilise le ' Taille de police ”, “ Poids de la police ”, “ Alignement du texte ”, “ Décoration de texte ', et le ' Couleur du texte » Classes Tailwind, respectivement.

  • Après cela, un élément '
    ' est ajouté qui applique le ' grille ” utilitaire pour définir son contenu dans le nombre indiqué de mises en page de grille, le “ marge ” pour définir la marge horizontale et la classe “ écart ” pour ajouter l'espace spécifié entre les colonnes.
  • Dans la section du corps de l'élément '
    ', huit autres éléments '
    ' sont inclus qui utilisent le ' Largeur de la bordure ' et le ' Couleur de la bordure » classes, respectivement.

Sortir
Exécutez le code HTML ci-dessus sur le serveur en direct et analysez le résultat :

Comme on le voit, la sortie ajoute l'écart spécifié entre les colonnes dans les deux dimensions de manière appropriée.



Exemple 2 : Utiliser l'utilitaire 'gap-{size}' pour ajouter un espace entre les lignes et les colonnes indépendamment
Le ' écart-{taille} ” peut également être implémenté avec les dimensions “x(horizontal)” et “y(vertical)” comme “gap-x-{size}” pour les lignes, et “gap-y-{size}” pour les colonnes pour ajouter le écart entre eux individuellement.

Voyons sa mise en œuvre pratique.

Code HTML
Jetez un oeil au code donné:

< diriger >
< lien href = '/dist/sortie.css' rel = 'feuille de style' >
< / diriger >
< corps >
< div classe = 'grille mx-2 grille-cols-4 écart-x-4 écart-y-6' >
< div classe = 'bordure-2 bordure-orange-600' >Premier tutoriel< / div >
< div classe = 'bordure-2 bordure-orange-600' >Deuxième tutoriel< / div >
< div classe = 'bordure-2 bordure-orange-600' >Troisième tutoriel< / div >
< div classe = 'bordure-2 bordure-orange-600' >Quatrième tutoriel< / div >
< div classe = 'bordure-2 bordure-orange-600' >Cinquième Tutoriel< / div >
< div classe = 'bordure-2 bordure-orange-600' >Sixième Tutoriel< / div >
< div classe = 'bordure-2 bordure-orange-600' >Septième Tutoriel< / div >
< div classe = 'bordure-2 bordure-orange-600' >Huitième Tutoriel< / div >
< / div >
< corps >

Ici le ' écart-x-{taille} ” ajoute l'espace entre les lignes et le “ gap-y-{taille} ” ajoute indépendamment l'écart spécifié entre les colonnes.

Sortir

Le résultat ci-dessus vérifie que l'écart entre les lignes et les colonnes est appliqué en conséquence.

Conclusion

'Tailwind CSS' fournit un ' écart-{taille} ” utilitaire pour ajouter l'écart entre les colonnes. Il peut également être utilisé pour ajouter l'espace entre les lignes et les colonnes séparément via le ' écart-x-{taille} ' et le ' écart-y-{taille} ” utilitaires. Cet article a fourni la procédure complète pour ajouter l'espace entre les colonnes dans Tailwind.