Grille de cartes

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 27 sur 35.

Une grille de cartes (Card Grid) est un modèle responsive courant utilisé dans les sites d'e-commerce, les portfolios ou les blogs. Elle organise les éléments (comme des produits, des articles ou des profils) en cartes uniformément espacées. Chaque carte contient généralement une image, un titre, du texte et parfois un bouton ou un lien.

Cette mise en page est souvent construite avec CSS Grid ou Flexbox de sorte que le nombre de cartes par ligne change en fonction de la taille de l'écran (par ex., 1 colonne sur mobile, 2–3 sur tablette, 4+ sur ordinateur de bureau).

Tout d'abord, créez votre structure HTML pour une liste de produits :

<div class="product-grid">
  <div class="product-card">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name</h3>
    <p>$19.99</p>
    <button>Add to Cart</button>
  </div>
  <!-- Plus de fiches produits ici -->
</div>

Maintenant, ajoutez du CSS pour rendre cela réactif :

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* For tablets and up */
@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* For desktops */
@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
}

Cela crée une seule colonne sur mobile, deux colonnes sur les tablettes et trois colonnes sur les écrans d'ordinateur.

Défi

Facile

On vous donne une page HTML pour une galerie de photos de voyage. Votre tâche consiste à créer une grille de cartes réactive qui s'adapte à différentes tailles d'écran.

Exigences :

Utilisez CSS Grid pour la mise en page.
Sur mobile (petits écrans), affichez 1 carte par ligne.
Sur les tablettes, affichez 2 cartes par ligne.
Sur les ordinateurs de bureau, affichez 3 cartes ou plus par ligne.

Stylez chaque carte avec :

Une belle couleur d'arrière-plan
Des coins arrondis

Objectif : Créer une mise en page de galerie propre et moderne qui a fière allure sur n'importe quelle taille d'écran.

Aide-mémoire

Une Grille de Cartes est un modèle adaptatif qui organise les éléments en cartes uniformément espacées, couramment utilisé pour les produits, les articles ou les portfolios.

Structure HTML pour une grille de cartes :

<div class="product-grid">
  <div class="product-card">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name</h3>
    <p>$19.99</p>
    <button>Add to Cart</button>
  </div>
  <!-- Plus de cartes de produits ici -->
</div>

CSS pour une grille de cartes adaptative utilisant CSS Grid :

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Pour les tablettes et plus */
@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Pour les ordinateurs de bureau */
@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
}

Cela crée une mise en page adaptative : 1 colonne sur mobile, 2 colonnes sur les tablettes et 3 colonnes sur les écrans d'ordinateur.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Card Grid Layout</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f9f9f9;
      margin: 0;
      padding: 2rem;
    }

    h1 {
      text-align: center;
      margin-bottom: 2rem;
      color: #333;
    }

    .gallery-grid {
      gap: 1.5rem;
    }

    .card {
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      overflow: hidden;
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: scale(1.03);
    }

    .card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .card h3 {
      margin: 0.8rem;
      color: #444;
    }

    .card p {
      margin: 0 0.8rem 1rem;
      font-size: 0.9rem;
      color: #666;
    }

    /* Tablet: 2 columns */
    @media (min-width: 600px) {
      .gallery-grid {
          
      }
    }

    /* Desktop: 3 columns */
    @media (min-width: 900px) {
      .gallery-grid {

      }
    }
  </style>
</head>
<body>
    <h1>Travel Gallery</h1>

    <div class="gallery-grid">
        <div class="card">
          <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e" alt="Beach">
          <h3>Sunny Beach</h3>
          <p>Relaxing views of golden sand and turquoise waters.</p>
        </div>
    
        <div class="card">
          <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e" alt="Mountains">
          <h3>Mountain Escape</h3>
          <p>Fresh air and breathtaking peaks for hiking lovers.</p>
        </div>
    
        <div class="card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/View_of_Empire_State_Building_from_Rockefeller_Center_New_York_City_dllu.jpg" alt="City Lights">
          <h3>City Lights</h3>
          <p>A bustling city skyline shining bright at night.</p>
        </div>
    
        <div class="card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Hutan_Tangkahan.jpg" alt="Forest">
          <h3>Green Forest</h3>
          <p>Peaceful trails and endless shades of green.</p>
        </div>
    
        <div class="card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/c/c6/Caravan_in_the_desert.jpg" alt="Desert">
          <h3>Desert Adventure</h3>
          <p>Golden dunes stretching far into the horizon.</p>
        </div>
    
        <div class="card">
          <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470" alt="Lake">
          <h3>Crystal Lake</h3>
          <p>Mirror-like reflections surrounded by mountains.</p>
        </div>
    </div>
</body>
</html>