Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Création de Mises en Page avec les Utilitaires de Grille | Principes de Base de la Mise en Page
Tailwind CSS pour le Développement Web

bookCréation de Mises en Page avec les Utilitaires de Grille

Une autre méthode d'organisation du contenu d'un site web consiste à utiliser des grilles. Tailwind CSS propose des utilitaires puissants pour créer des mises en page en grille. Ce chapitre explique 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, utiliser la classe grid. Il est possible de contrôler le nombre de colonnes, les espacements entre les lignes et les colonnes, et plus encore.

index.html

index.html

copy

Explication

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

Grille avec lignes

index.html

index.html

copy

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

Contrôle des tailles de colonnes et de lignes

Le contrôle des tailles des colonnes et des lignes s’effectue à l’aide des classes grid-cols-{n} et grid-rows-{n}, où {n} représente le nombre de colonnes ou de lignes. Il est également possible d’utiliser des unités fractionnaires (fr), des pourcentages et d’autres unités de dimensionnement.

index.html

index.html

copy

Explication

  1. col-span-2 : Étend l’élément sur deux colonnes ;
  2. col-span-3 : Étend l’élément sur l’ensemble des trois colonnes.

Tailles fixes et flexibles

index.html

index.html

copy

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 la grille

Des classes utilitaires spécifiques permettent de définir le nombre et la largeur des colonnes et des lignes dans la mise en page de la grille.

Colonnes de grille personnalisées

index.html

index.html

copy

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

index.html

index.html

copy

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 consulter la documentation officielle pour plus d’informations sur la grille Tailwind CSS.

1. Quelle classe définit la propriété display sur grid ?

2. Comment définir une grille avec trois colonnes ?

question mark

Quelle classe définit la propriété display sur grid ?

Select the correct answer

question mark

Comment définir une grille avec trois colonnes ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 5

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 3.57

bookCréation de Mises en Page avec les Utilitaires de Grille

Glissez pour afficher le menu

Une autre méthode d'organisation du contenu d'un site web consiste à utiliser des grilles. Tailwind CSS propose des utilitaires puissants pour créer des mises en page en grille. Ce chapitre explique 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, utiliser la classe grid. Il est possible de contrôler le nombre de colonnes, les espacements entre les lignes et les colonnes, et plus encore.

index.html

index.html

copy

Explication

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

Grille avec lignes

index.html

index.html

copy

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

Contrôle des tailles de colonnes et de lignes

Le contrôle des tailles des colonnes et des lignes s’effectue à l’aide des classes grid-cols-{n} et grid-rows-{n}, où {n} représente le nombre de colonnes ou de lignes. Il est également possible d’utiliser des unités fractionnaires (fr), des pourcentages et d’autres unités de dimensionnement.

index.html

index.html

copy

Explication

  1. col-span-2 : Étend l’élément sur deux colonnes ;
  2. col-span-3 : Étend l’élément sur l’ensemble des trois colonnes.

Tailles fixes et flexibles

index.html

index.html

copy

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 la grille

Des classes utilitaires spécifiques permettent de définir le nombre et la largeur des colonnes et des lignes dans la mise en page de la grille.

Colonnes de grille personnalisées

index.html

index.html

copy

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

index.html

index.html

copy

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 consulter la documentation officielle pour plus d’informations sur la grille Tailwind CSS.

1. Quelle classe définit la propriété display sur grid ?

2. Comment définir une grille avec trois colonnes ?

question mark

Quelle classe définit la propriété display sur grid ?

Select the correct answer

question mark

Comment définir une grille avec trois colonnes ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 5
some-alt