تخطيط شبكة البطاقات

جزء من قسم Practical Frontend في رحلة HTML على Coddy. الدرس 27 من 35.

تُعد Card Grid نمطًا متجاوبًا شائعًا يُستخدم في مواقع التجارة الإلكترونية أو ملفات الأعمال أو المدونات. وهي ترتّب العناصر (مثل المنتجات أو المقالات أو الملفات الشخصية) في بطاقات متباعدة بالتساوي. تحتوي كل بطاقة عادةً على صورة وعنوان وبعض النصوص، وأحيانًا على زر أو رابط.

غالبًا ما يُبنى هذا التخطيط باستخدام CSS Grid أو Flexbox بحيث يتغير عدد cards في كل صف اعتمادًا على حجم الشاشة (مثلًا، column واحدة على mobile، و2-3 على Tablet، و4+ على Desktop).

أولًا، أنشئ بنية HTML الخاصة بك لعرض قائمة المنتجات:

<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>
  <!-- المزيد من بطاقات المنتجات هنا -->
</div>

الآن، أضف CSS لجعل هذا متجاوبًا:

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

يُنشئ هذا عمودًا واحدًا على أجهزة mobile، وعمودين على أجهزة Tablet، وثلاثة أعمدة على شاشات Desktop.

التحدي

سهل

لديك صفحة HTML لمعرض صور سفر. مهمتك هي إنشاء شبكة card متجاوبة تتكيف مع أحجام الشاشات المختلفة.

المتطلبات:

استخدم CSS Grid للتخطيط.
على mobile (الشاشات الصغيرة)، اعرض card واحدة في كل صف.
على tablets، اعرض cardين في كل صف.
على desktops، اعرض 3 card أو أكثر في كل صف.

نسّق كل card باستخدام:

background color أنيق
زوايا مستديرة

الهدف: إنشاء تخطيط Gallery نظيف وعصري يبدو رائعًا على أي حجم شاشة.

جرّب بنفسك

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