Kart Izgara Düzeni

Coddy'nin HTML Journey'sinin Practical Frontend bölümünün bir parçası — ders 27 / 35.

Bir Kart Izgarası (Card Grid), e-ticaret sitelerinde, portföylerde veya bloglarda kullanılan yaygın bir duyarlı (responsive) desendir. Öğeleri (ürünler, makaleler veya profiller gibi) eşit aralıklı 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 düşen kart sayısı ekran boyutuna bağlı olarak değişir (örneğin, 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ı gelecek -->
</div>

Şimdi, bunu duyarlı (responsive) hale getirmek için CSS ekleyin:

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

/* Tabletler ve üstü için */
@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Masaüstü bilgisayarlar için */
@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

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

Görev

Kolay

Bir seyahat fotoğraf galerisi için bir HTML sayfası size verilmiştir. Göreviniz, farklı ekran boyutlarına uyum sağlayan duyarlı (responsive) bir kart ızgarası oluşturmaktır.

Gereksinimler:

Düzen için CSS Grid kullanın.
Mobilde (küçük ekranlar), her satırda 1 kart gösterin.
Tabletlerde, her satırda 2 kart gösterin.
Masaüstü bilgisayarlarda, her satırda 3 veya daha fazla kart gösterin.

Her kartı şunlarla stillendirin:

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

Hedef: Her ekran boyutunda harika görünen temiz, modern bir galeri düzeni oluşturun.

Kopya kağıdı

Bir Kart Izgarası (Card Grid), öğeleri eşit aralıklı kartlar halinde düzenleyen, genellikle ürünler, makaleler veya portfolyolar için kullanılan duyarlı bir desendir.

Bir kart ızgarası için HTML yapısı:

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

CSS Grid kullanarak duyarlı kart ızgarası için CSS:

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

/* Tabletler ve üstü için */
@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Masaüstü bilgisayarlar için */
@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

Bu, duyarlı bir düzen oluşturur: mobilde 1 sütun, tabletlerde 2 sütun ve masaüstü ekranlarda 3 sütun.

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>