Card-Grid-Layout

Teil des Abschnitts Practical Frontend der HTML-Journey von Coddy — Lektion 27 von 35.

Ein Card Grid ist ein verbreitetes responsives Layout-Muster, das auf E-Commerce-Websites, in Portfolios oder Blogs eingesetzt wird. Es ordnet Elemente (wie Produkte, Artikel oder Profile) in gleichmäßig verteilten Karten an. Jede Karte enthält normalerweise ein Bild, einen Titel, etwas Text und manchmal eine Schaltfläche oder einen Link.

Dieses Layout wird oft mit CSS Grid oder Flexbox erstellt, sodass sich die Anzahl der Karten pro Zeile je nach Bildschirmgröße ändert (z. B. 1 Spalte auf dem Mobiltelefon, 2–3 auf dem Tablet, 4+ auf dem Desktop).

Erstellen Sie zunächst Ihre HTML-Struktur für eine Produktauflistung:

<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>
  <!-- Weitere Produktkarten hier -->
</div>

Fügen Sie nun CSS hinzu, um dies responsiv zu gestalten:

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

/* Für Tablets und größer */
@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

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

Dies erzeugt eine einzelne Spalte auf Mobilgeräten, zwei Spalten auf Tablets und drei Spalten auf Desktop-Bildschirmen.

Aufgabe

Einfach

Ihnen wird eine HTML-Seite für eine Reise-Fotogalerie zur Verfügung gestellt. Ihre Aufgabe ist es, ein responsives Karten-Grid zu erstellen, das sich an verschiedene Bildschirmgrößen anpasst.

Anforderungen:

Verwenden Sie CSS Grid für das Layout.
Auf Mobilgeräten (kleine Bildschirme) soll 1 Karte pro Zeile angezeigt werden.
Auf Tablets sollen 2 Karten pro Zeile angezeigt werden.
Auf Desktops sollen 3 oder mehr Karten pro Zeile angezeigt werden.

Stylen Sie jede Karte mit:

Einer ansprechenden Hintergrundfarbe
Abgerundeten Ecken

Ziel: Erstellen Sie ein sauberes, modernes Galerie-Layout, das auf jeder Bildschirmgröße gut aussieht.

Spickzettel

Ein Card Grid (Karten-Raster) ist ein responsives Muster, das Elemente in gleichmäßig verteilten Karten anordnet und häufig für Produkte, Artikel oder Portfolios verwendet wird.

HTML-Struktur für ein Card Grid:

<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>
  <!-- Weitere Produktkarten hier -->
</div>

CSS für ein responsives Card Grid mit CSS Grid:

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

/* Für Tablets und größer */
@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

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

Dies erzeugt ein responsives Layout: 1 Spalte auf Mobilgeräten, 2 Spalten auf Tablets und 3 Spalten auf Desktop-Bildschirmen.

Probier es selbst

<!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>