Une grille de projets responsive
Du CSS sans fichier CSS : les layouts avec Grid
Tout bon portfolio a besoin d'une façon propre de présenter votre travail. Le motif classique est une grille de cartes projets — des lignes et des colonnes nettes qui se réorganisent automatiquement quand la taille de l'écran change.
À l'ancienne, il fallait se battre avec les floats et les clearfix. La nouvelle méthode ? Vous décrivez ce que vous voulez — « trois colonnes égales avec un espacement » — et les utilitaires grid de Tailwind s'occupent du reste. Aucun fichier CSS requis.
Dans cette leçon, vous allez construire une grille de projets responsive : un titre, puis un conteneur grid avec trois cartes. À la fin, vous maîtriserez grid, grid-cols-3 et gap — les trois outils que vous réutiliserez sans cesse.
Instructions
Ajoutez un titre de section h2 au-dessus de votre grille pour que les visiteurs sachent ce qu'ils regardent.
Indice : Utilisez : `<h2 class="text-3xl font-bold mb-8 text-center">Projets sélectionnés</h2>`
Où faut-il écrire ça ?
<!-- Construisez votre grille de projets ici -->Écrivez-le à la ligne 12 — sous ce commentaire, après le code que vous avez déjà ajouté.
Créez une div conteneur de grille avec la classe grid et un espacement (gap) entre les cartes.
Faites en sorte que la grille affiche trois colonnes égales sur les écrans moyens et plus grands.
Ajoutez au moins une carte projet dans la grille avec un élément article contenant un titre et une description.
Votre code
Décrivez ce que vous voulez créer pour cette étape et je rédige le code — puis cliquez sur Appliquer pour l'insérer dans votre éditeur. Cette étape : Ajoutez un titre de section h2 au-dessus de votre grille pour que les visiteurs sachent ce qu'ils regardent.