La mise en page CSS peut souvent devenir complexe et laborieuse.
Cette complexité entraîne des frustrations, surtout lorsque vous devez gérer de multiples éléments et alignements.
Cet article vous guide sur l’utilisation de Tailwind pour simplifier la création de grilles CSS, rendant le processus plus efficace et flexible.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée
CSS Grid avec Tailwind : Propriétés clés
On a pu constater que pour gérer les éléments d’une Grid, on peut soit modifier leurs comportements au niveau des colonnes soit au niveau des lignes. Et pour notre documentation, nous allons commencer par remplir la partie colonne.
Nous avons ici :
- grid-columns-start :qui correspond à la classecols-start-{n}pour définir le colonne de départ d’un élément
- grid-columns-end :pour indiquer la colonne d’arrivée avec la classecols-end-{n}
- (grid-column :span 3 ;): pour définir le nombre de colonnes que l’élément va occuper (col-span-3)
Ensuite on a la partie ligne qui est représenté dans le document comme ceci :
- grid-rows-start :pour choisir la ligne de départ avec la classerows-start-{n}
- grid-rows-end :qui correspond àrows-end-{n}afin de choisir où la hauteur de l’élément va se terminer.
- (grid-row :span 2 😉 : pour occuper un nombre prédéfinit de lignes (row-span-2)
Si vous êtes un peu coincé sur le remplissage de votre documentation, vous pouvez regarder :
- Ce code :
<h2 id="mettre-en-page-avec-grid" class="rb-heading-index-2 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 -->
<! –La partie contenus… -->
<div class="flex justify-between border-b-2">
<p>grid-column-start</p>
<p>col-start-1</p>
</div>
<div class="flex justify-between border-b-2">
<p>grid-column-end</p>
<p>col-end-3</p>
</div>
<div class="flex justify-between border-b-2">
<p>grid-column: span 3</p>
<p>col-span-3</p>
</div>
<div class="flex justify-between border-b-2">
<p>grid-row-start</p>
<p>row-start-1</p>
</div>
<div class="flex justify-between border-b-2">
<p>grid-row-end</p>
<p>row-end-3</p>
</div>
<div class="flex justify-between border-b-2">
<p>grid-row: span 2</p>
<p>row-span-2</p>
</div>
</section>
- Ce CodePen pour voir de n’importe où :
CodePen : Consulter dans ce CodePen la version finale de la documentation jusqu’au partie concernant CSS Grid.
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
Utiliser grid-columns et grid-rows
- Pour structurer les conteneurs avec Tailwind CSS, vous utilisez grid-cols-{n} pour définir le nombre de colonnes (de 1 à 12 ) et grid-rows-{n} pour ajuster la hauteur des lignes. L’utilisation de auto permet de rendre l’espace flexible, et la classe gap-{valeur} ajoute des gouttières entre les éléments.
- Si vous voulez rendre la mise en page responsive, Tailwind propose desbreakpointscommelg,md, etsm. Par exemple, vous pouvez ajuster le nombre de colonnes en fonction de la taille d’écran aveclg :grid-cols-3,md:grid-cols-2, etsm:grid-cols-1.
- Enfin, vous pouvez positionner les éléments, utilisez col-start-{n} , col-end-{n} , row-start-{n} et row-end-{n} . Vous pouvez également étendre les éléments avec col-span-{n} ou row-span-{n} pour occuper plusieurs colonnes ou lignes
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 grid-columns avec Tailwind?
Comment configurer la mise en page responsive avec Tailwind?
Quels sont les avantages d'utiliser Tailwind pour CSS Grid?
Comment gérer les lignes dans une grille CSS avec Tailwind?
Comment ajouter des gouttières entre les éléments avec Tailwind?
Conclusion
En maîtrisant CSS Grid avec Tailwind, vous pouvez créer des mises en page sophistiquées et adaptables. Quels autres outils CSS utilisez-vous pour optimiser vos designs?
