Utilitaires de Grille

Une autre façon d'organiser le contenu d'un site web est d'utiliser des grilles. Tailwind CSS offre des utilitaires puissants pour créer des mises en page en grille. Ce chapitre expliquera comment utiliser les utilitaires de grille de Tailwind CSS pour établir des conteneurs et des éléments de grille.

Conteneur de Grille

Pour définir un conteneur de grille, utilisez la classe grid. Vous pouvez contrôler le nombre de colonnes, les espaces entre les lignes et les colonnes, et plus encore.

Explication

1. grid: Définit l'affichage de l'élément en grille;
2. grid-cols-3: Définit une grille avec trois colonnes;
3. gap-4: Ajoute un espace de 1rem (16px) entre les éléments de la grille.

Grille avec des lignes

grid-rows-2: Définit une grille avec deux lignes.

Contrôler les tailles des colonnes et des lignes

Vous pouvez contrôler les tailles des colonnes et des lignes en utilisant les classes grid-cols-{n} et grid-rows-{n}, où {n} représente le nombre de colonnes ou de lignes. Vous pouvez également utiliser des unités fractionnaires (fr), des pourcentages et d'autres unités de dimensionnement.

Explication

1. col-span-2: Étend l'élément sur deux colonnes;
2. col-span-3: Étend l'élément sur les trois colonnes.

Tailles Fixes et Flexibles

Explication

1. w-1/2: Définit la largeur de l'élément à 50% de son conteneur;
2. w-full: Définit la largeur de l'élément à 100% de son conteneur;
3. w-1/3: Définit la largeur de l'élément à 33,33% de son conteneur.

Colonnes et Lignes de Modèle de Grille

Vous pouvez utiliser des classes utilitaires spécifiques pour définir le nombre et la largeur des colonnes et des lignes dans votre mise en page de grille.

Colonnes de grille personnalisées

Explication

1. grid-cols-4: Définit une grille avec quatre colonnes;
2. col-span-1: Étend l'élément sur une colonne;
3. col-span-2: Étend l'élément sur deux colonnes.

Lignes de grille personnalisées

Explication

1. grid-rows-3: Définit une grille avec trois lignes;
2. row-span-2: Étend l'élément sur deux lignes;
3. row-span-1: Étend l'élément sur une ligne.

Remarque

Veuillez vous référer à la documentation officielle pour plus d'informations sur la grille Tailwind CSS.