Grille de cartes

Fait partie de la section Front-end pratique du Journey HTML de Coddy. Leçon 27 sur 35.

Une grille de cartes est un modèle réactif courant utilisé sur les sites de commerce électronique, les portfolios ou les blogs. Elle organise les éléments (comme des produits, des articles ou des profils) en cartes régulièrement 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 créée avec CSS Grid ou Flexbox afin que le nombre de cartes par ligne change en fonction de la taille de l’écran (par exemple, 1 colonne sur mobile, 2 à 3 sur tablette, 4 ou plus sur ordinateur).

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 cartes de produits ici -->
</div>

Maintenant, ajoutez du CSS pour rendre cela responsive :

.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 de bureau.

Défi

Facile

Vous disposez d’une page HTML pour une galerie de photos de voyage. Votre tâche consiste à créer une grille de cartes responsive 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.

Donnez à chaque carte :

Une jolie couleur d’arrière-plan
Des coins arrondis

Objectif : créez une mise en page de galerie épurée et moderne, qui soit esthétique quelle que soit la taille de l’écran.

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>