Mise en page de cartes en Grid
Fait partie de la section Maîtrise du CSS du Journey HTML de Coddy. Leçon 42 sur 43.
Défi
FacileCréez une mise en page simple à 2 colonnes pour les cartes à l’aide de CSS Grid.
- Les cartes doivent être affichées sur deux colonnes égales.
- Il doit y avoir un peu d’espace entre les cartes.
Essayez vous-même
<html>
<head>
<title>Grid Card Layout</title>
<style>
.card {
background-color: #0252c9;
padding: 16px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* Add your styles here */
</style>
</head>
<body>
<div class="card-container">
<div class="card">
<h3>Card 1</h3>
<p>This is the first card with some text.</p>
</div>
<div class="card">
<h3>Card 2</h3>
<p>This is the second card with more content.</p>
</div>
</div>
</body>
</html>
Toutes les leçons de Maîtrise du CSS
1Maîtrise des sélecteurs – Combinaisons
IntroductionSélecteur de descendantSélecteur d'enfantSélecteur de frère adjacentSélecteur de frère généralDéfi récapitulatif7Construire avec CSS Grid
Les bases de GridPlacement d'éléments Grid-rowZones nomméesDéfi récapitulatif2Pseudo-classes interactives
Pseudo-classesEffets de survolEffets de focusStyles actifsDéfi récapitulatif3Pseudo-classes structurelles
Pseudo-classes structurellesCibler le premier enfantCibler le dernier enfantLa puissance des motifs : utiliser nth-childDéfi récapitulatif6Landing Page
Styler la section d'en-têteStyler le boutonMise en page de la sectionMise en page des cartesAjouter les touches finales9Défis finaux
Mise en évidence du menu actifLignes de tableau en zèbreEffet de survol de boutonMise en page de cartes en GridImage Hero floutéeEntraînez-vous par vous-même : Playground Web