Construire des Grilles CSS avec Tailwind

Créer une mise en page cohérente et flexible peut être un défi sans une compréhension claire des grilles CSS.

Sans une bonne structure, les sites peuvent sembler désorganisés, entraînant une mauvaise expérience utilisateur.

Cet article vous guide dans l’utilisation des grilles CSS avec Tailwind pour structurer efficacement vos pages web.

Table de matière

Mise en page avec Grid Configurer Grilles CSS avec Tailwind Mettre en page avec Grid FAQ Conclusion

Formation Maîtriser Tailwind CSS : Le guide complet

Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée

Table of Contents

On revient maintenant à notre documentation pour intégrer les concepts que nous venons d’étudier.

Donc pour commencer, si vous avez déjà créé un fichier HTML quelque part pour votre documentation, il vous suffit d’ajouter le code suivant pour la base de la documentation :

				
					
 <! --Insérer ce code dans votre documentation -->
<h2 id="mise-en-page-avec-grid" class="rb-heading-index-1 text-center font-bold text-xl mb-3">Mise en page avec Grid</h2>
<section class="bg-white w-3/4 m-auto p-3 border-2 rounded-xl mb-10">
<div class="flex justify-between border-b-2">
<p class="font-bold">Propriété</p>
<p class="font-bold">class</p>
</div>
<! –La partie conteneur -->
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<! –La partie contenus -->
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
</section>

Ou bien, vous pouvez opter pour le lien CodePen si vous ne voulez pas ouvrir votre IDE :

CodePen : Retrouver la base du code pour la documentation via le lien ci-dessous :

See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.

Configurer Grilles CSS avec Tailwind

Dans la partie sur les conteneurs, nous avons joué avec quatre propriétés CSS qui sont les suivantes :

« display :grid ; » :Celui qui nous permet de définir un conteneur comme étant un Grid dont la classe utilitaire sur Tailwind est simplifiée pargrid

grid-template-columns :Pour définir le nombre de colonnes avecgrid-cols-2par exemple pour diviser les colonnes en partie égale ou biengrid-cols-[200px_1fr]pour des valeurs précises.

grid-template-rows :pareil que les colonnes sauf que cette fois-ci on parle des lignes avecgrid-rows-2etgrid-rows-[200px_1fr]comme exemple

gap :enfin nous avons la classegapqui associée à une valeur permet d’ajouter des gouttières au Grid (gap-4,gap-x-4,gap-y-4)

Vous l’aurez compris, il faut ajouter ces classes dans notre documentation et essayer de le faire par vous-même, je vous donne cependant la version finale que vous pouvez retrouver :

En code :

				
					
 <h2 id="mettre-en-page-avec-grid" class="rb-heading-index-3 text-center font-bold text-xl mb-3">Mettre en page avec Grid</h2>
<section class="bg-white w-3/4 m-auto p-3 border-2 rounded-xl mb-10">
<div class="flex justify-between border-b-2">
<p class="font-bold">Propriété</p>
<p class="font-bold">class</p>
</div>
<! –La partie conteneur -->
<div class="flex justify-between border-b-2">
<p>display:grid ;</p>
<p>grid</p>
</div>
<div class="flex justify-between border-b-2">
<p>grid-template-columns</p>
<p>grid-cols-2, grid-cols-[200px_1fr] </p>
</div>
<div class="flex justify-between border-b-2">
<p>grid-template-rows</p>
<p>grid-rows-2, grid-rows-[200px_1fr] </p>
</div>
<div class="flex justify-between border-b-2">
<p>gap</p>
<p>gap-4, gap-x-4, gap-y-4</p>
</div>
<! –La partie contenus… -->
</section>

Sur CodePen :

CodePen : Avec le lien suivant, vous allez pouvoir vous rediriger vers la page où contient la documentation avec la partie concernant Grid :

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 display:grid avec Tailwind ?

Pour utiliser ‘display:grid’ avec Tailwind, vous devez simplement appliquer la classe utilitaire ‘grid’. Cela permet de transformer un élément en conteneur Grid, facilitant ainsi l’organisation de vos éléments enfants en lignes et colonnes. En combinant cette classe avec d’autres propriétés comme ‘grid-template-columns’ ou ‘grid-template-rows’, vous pouvez définir la structure de votre mise en page de manière précise.

Comment définir des colonnes dans un Grid Tailwind ?

Pour définir des colonnes dans un Grid avec Tailwind, utilisez la propriété ‘grid-template-columns’. Par exemple, ‘grid-cols-2’ créera deux colonnes de taille égale. Pour des colonnes de largeur spécifique, utilisez ‘grid-cols-[200px_1fr]’, où ‘200px’ est la largeur de la première colonne et ‘1fr’ la deuxième. Cette flexibilité permet de créer des mises en page adaptables et personnalisées.

Quelles classes utiliser pour les lignes dans un Grid Tailwind ?

Avec Tailwind, la classe ‘grid-template-rows’ est utilisée pour définir les lignes dans un conteneur Grid. Par exemple, ‘grid-rows-2’ crée deux lignes de hauteur égale. Pour des hauteurs spécifiques, ‘grid-rows-[200px_1fr]’ peut être appliqué, assignant 200 pixels à la première ligne et une fraction de l’espace restant à la seconde. Cette approche offre un contrôle granulaire sur la disposition verticale des éléments.

Comment gérer les espacements entre éléments Grid avec Tailwind ?

Pour gérer les espacements entre les éléments d’un Grid avec Tailwind, utilisez la classe ‘gap’. Par exemple, ‘gap-4’ ajoute un espace uniforme entre les lignes et colonnes. Pour un espacement uniquement horizontal ou vertical, ‘gap-x-4’ et ‘gap-y-4’ sont respectivement utilisés. Ces classes permettent une gestion facile et précise des espacements dans vos mises en page.

Où trouver des exemples de code pour Grid avec Tailwind ?

Des exemples de code pour Grid avec Tailwind sont disponibles sur CodePen. Vous pouvez explorer des exemples pratiques et voir comment les grilles sont configurées et stylisées. Ces ressources sont idéales pour visualiser des implémentations réelles et comprendre comment intégrer efficacement des grilles dans vos projets.

Conclusion

En maîtrisant les grilles CSS avec Tailwind, vous pouvez créer des mises en page complexes et adaptables de manière efficace. Quels autres outils de Tailwind trouvez-vous utiles pour la conception de vos projets ?

Construire des Grilles CSS avec Tailwind

Formation Maîtriser Tailwind CSS : Le guide complet

Configurer Grilles CSS avec Tailwind

Formez-vous gratuitement avec Alphorm !

FAQ

Conclusion

Derniers Articles

Laisser un commentaire Annuler la réponse