Kart Izgara Düzeni

Coddy'nin HTML Journey'sinin Pratik Ön Yüz bölümünün bir parçası. Ders 27 / 35.

Kart Izgarası, e-ticaret sitelerinde, portföylerde veya bloglarda kullanılan yaygın bir duyarlı tasarım modelidir. Öğeleri (ürünler, makaleler veya profiller gibi) eşit aralıklarla yerleştirilmiş kartlar halinde düzenler. Her kart genellikle bir görsel, bir başlık, biraz metin ve bazen bir düğme veya bağlantı içerir.

Bu düzen genellikle CSS Grid veya Flexbox ile oluşturulur; böylece satır başına kart sayısı ekran boyutuna göre değişir (ör. mobilde 1 sütun, tablette 2-3, masaüstünde 4+).

İlk olarak, bir ürün listelemesi için HTML yapınızı oluşturun:

<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>
  <!-- Buraya daha fazla ürün kartı -->
</div>

Şimdi bunu duyarlı hale getirmek için CSS ekleyin:

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

Bu, mobil cihazlarda tek bir sütun, tabletlerde iki sütun ve masaüstü ekranlarda üç sütun oluşturur.

Görev

Kolay

Seyahat fotoğraf galerisi için bir HTML sayfası verildi. Göreviniz, farklı ekran boyutlarına uyum sağlayan duyarlı bir kart ızgarası oluşturmaktır.

Gereksinimler:

Düzen için CSS Grid kullanın.
Mobil cihazlarda (küçük ekranlarda) satır başına 1 kart gösterin.
Tabletlerde satır başına 2 kart gösterin.
Masaüstü bilgisayarlarda satır başına 3 veya daha fazla kart gösterin.

Her kartı şunlarla biçimlendirin:

Hoş bir arka plan rengi
Yuvarlatılmış köşeler

Amaç: Her ekran boyutunda harika görünen, sade ve modern bir galeri düzeni oluşturun.

Kendin dene

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