Contenu du cours
Tailwind CSS pour le Développement Web
Tailwind CSS pour le Développement Web
1. Introduction et Configuration
3. Construction de Composants de Base
5. Réactivité et Personnalisation
Défi : Utilitaires de Grille
Tâche
Complétez la structure HTML en ajoutant les classes Tailwind CSS manquantes pour répondre aux exigences de mise en page.
- Conteneur de grille : Définir une grille avec trois colonnes et un écart de 1rem (16px) entre les éléments;
- Premier élément : S'étendre sur deux colonnes;
- Deuxième élément : S'étendre sur une colonne;
- Troisième élément : S'étendre sur les trois colonnes.
index.html
- Pour le conteneur de la grille, utilisez
grid grid-cols-3 gap-4
; - Pour le premier élément, utilisez
col-span-2
; - Pour le deuxième élément, utilisez
col-span-1
; - Pour le troisième élément, utilisez
col-span-3
.
index.html
Tout était clair ?
Merci pour vos commentaires !
Section 4. Chapitre 6