La création de grilles CSS peut souvent sembler complexe et fastidieuse.
Sans une méthode simple, vous risquez de perdre du temps à ajuster manuellement chaque élément de votre mise en page.
Cet article vous guide sur l’utilisation des classes utilitaires pour simplifier et optimiser la création de grilles CSS.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée
Une autre méthode que vous pouvez aussi utiliser pour agencer les éléments de votre Grid, c’est d’utiliser les classes utilitaires :
- cols-span-{n} :pour indiquer le nombre de colonne que votre élément va occuper
- rows-span-{n} :pour occuper un nombre de ligne définit parn.
Voici deux exemples simples afin que vous voyiez comment cela fonctionne :
Exemple 1 :
<div class="grid grid-cols-4 gap-4 w-1/2 h-56 ">
<div class="col-span-2 bg-blue-500 p-4 text-white">Élément 1 (col-span-2)</div>
<div class="col-span-1 bg-green-500 p-4 text-white">Élément 2 (col-span-1)</div>
<div class="col-span-1 bg-red-500 p-4 text-white">Élément 3 (col-span-1)</div>
<div class="col-span-4 bg-yellow-500 p-4 text-white">Élément 4 (col-span-4)</div>
</div>
Résultat :
À l’intérieur de cette grille, quatre éléments sont disposés. Le premier élément occupe deux colonnes sur les quatre disponibles grâce à la classe col-span-2 . Le deuxième élément, en vert, et le troisième élément, en rouge, occupent chacun une colonne avec les classes col-span-1 . Enfin, le quatrième élément, en jaune, occupe toute la largeur de la grille, soit quatre colonnes, grâce à col-span-4.
- Exemple 2 :
<div class="grid grid-rows-3 grid-cols-4 gap-4 w-1/2 border-gray-500 border-4 border-solid">
<div class="row-span-2 bg-blue-500 p-4 text-white">Élément 1 (row-span-2)</div>
<div class="row-span-1 bg-green-500 p-4 text-white">Élément 2 (row-span-1)</div>
<div class="row-span-1 bg-red-500 p-4 text-white">Élément 3 (row-span-1)</div>
<div class="row-span-3 bg-yellow-500 p-4 text-white">Élément 4 (row-span-3)</div>
</div>
Résultat :
Les classes row-span sont utilisées ici pour indiquer combien de lignes chaque élément doit occuper verticalement dans la grille. L’élément 1 utilise row-span-2 , ce qui signifie qu’il occupe deux lignes de hauteur sur les trois disponibles . Les éléments 2 et 3 n’occupent qu’une seule ligne chacun avec row-span-1 . Le quatrième élément utilise row-span-3 , ce qui signifie qu’il occupe la totalité des trois lignes, s’étendant verticalement sur toute la grille, avec un fond jaune et du texte blanc.
CodePen : Pour pratiquer en temps réel, vous pouvez cliquer sur le lien suivant pour vous rediriger vers le CodePen correspondant.
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment utiliser les classes cols-span en CSS ?
Quelle est l'utilité des classes rows-span dans une grille CSS ?
Quels sont les avantages d'utiliser Tailwind CSS pour les grilles ?
Comment créer une grille responsive avec Tailwind CSS ?
Où puis-je pratiquer la création de grilles CSS ?
Conclusion
L’utilisation des classes utilitaires dans Tailwind CSS transforme la manière dont vous construisez vos grilles. Quel autre aspect du design CSS aimeriez-vous explorer pour enrichir vos compétences ?
