Tata Letak Grid Kartu

Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 27 dari 35.

Card Grid adalah pola responsif yang umum digunakan di situs e-commerce, portofolio, atau blog. Pola ini menyusun item seperti produk, artikel, atau profil ke dalam kartu-kartu dengan jarak yang sama. Setiap kartu biasanya berisi gambar, judul, teks, dan terkadang tombol atau tautan.

Tata letak ini sering dibuat dengan CSS Grid atau Flexbox agar jumlah kartu di setiap baris berubah sesuai ukuran layar (misalnya, 1 kolom di perangkat seluler, 2-3 di tablet, 4+ di desktop).

Pertama, buat struktur HTML untuk daftar produk:

<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>
  <!-- Kartu produk lainnya di sini -->
</div>

Sekarang, tambahkan CSS agar tata letak ini responsif:

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

/* Untuk tablet dan perangkat yang lebih besar */
@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

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

Ini membuat satu kolom di ponsel, dua kolom di tablet, dan tiga kolom di layar desktop.

Tantangan

Mudah

Kamu diberi halaman HTML untuk galeri foto perjalanan. Tugasmu adalah membuat grid kartu responsif yang menyesuaikan dengan berbagai ukuran layar.

Persyaratan:

Gunakan CSS Grid untuk tata letak.
Di perangkat seluler (layar kecil), tampilkan 1 kartu per baris.
Di tablet, tampilkan 2 kartu per baris.
Di desktop, tampilkan 3 kartu atau lebih per baris.

Beri gaya pada setiap kartu dengan:

Warna latar belakang yang menarik
Sudut membulat

Tujuan: Buat tata letak galeri yang rapi dan modern, serta terlihat bagus pada ukuran layar apa pun.

Coba sendiri

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