Kartenraster-Layout

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

Ein Card Grid ist ein gängiges responsives Muster, das auf E-Commerce-Websites, in Portfolios oder Blogs verwendet 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 häufig mit CSS Grid oder Flexbox erstellt, sodass sich die Anzahl der Karten pro Zeile je nach Bildschirmgröße ändert (z. B. 1 Spalte auf Mobilgeräten, 2–3 auf Tablets, 4+ auf Desktopgeräten).

Erstelle zuerst deine HTML-Struktur für eine Produktliste:

<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üge nun CSS hinzu, um dies responsiv zu machen:

.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;
}

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

Aufgabe

Einfach

Dir steht eine HTML-Seite für eine Reisefotogalerie zur Verfügung. Deine Aufgabe ist es, ein responsives Kartenraster zu erstellen, das sich an verschiedene Bildschirmgrößen anpasst.

Anforderungen:

Verwende CSS Grid für das Layout.
Auf Mobilgeräten (kleinen Bildschirmen) soll 1 Karte pro Zeile angezeigt werden.
Auf Tablets sollen 2 Karten pro Zeile angezeigt werden.
Auf Desktopgeräten sollen 3 oder mehr Karten pro Zeile angezeigt werden.

Gestalte jede Karte mit:

einer ansprechenden Hintergrundfarbe
abgerundeten Ecken

Ziel: Erstelle ein übersichtliches, modernes Galerielayout, das auf jeder Bildschirmgröße großartig aussieht.

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>