Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Utilitaires de Grille | Notions de Base en Mise en Page
Tailwind CSS pour le Développement Web
course content

Contenu du cours

Tailwind CSS pour le Développement Web

Tailwind CSS pour le Développement Web

1. Introduction et Configuration
2. Concepts de Base et Style de Base
3. Construction de Composants de Base
4. Notions de Base en Mise en Page
5. Réactivité et Personnalisation

book
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.
html

index.html

copy
  • 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.
html

index.html

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 6
We're sorry to hear that something went wrong. What happened?
some-alt