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

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

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

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

أولاً، قم بإنشاء هيكل 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;
}

/* للأجهزة اللوحية وما فوقها */
@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* لأجهزة الكمبيوتر المكتبية */
@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

يؤدي هذا إلى إنشاء عمود واحد على الأجهزة المحمولة، وعمودين على الأجهزة اللوحية، وثلاثة أعمدة على شاشات سطح المكتب.

التحدي

سهل

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

المتطلبات:

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

قم بتنسيق كل بطاقة باستخدام:

لون خلفية جميل
زوايا مستديرة

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

ورقة مرجعية

تعد شبكة البطاقات (Card Grid) نمطًا متجاوبًا يقوم بترتيب العناصر في بطاقات متباعدة بشكل متساوٍ، وتُستخدم عادةً للمنتجات أو المقالات أو المعارض الشخصية.

هيكل 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 لشبكة بطاقات متجاوبة باستخدام CSS Grid:

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

/* للأجهزة اللوحية وما فوق */
@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* لأجهزة الكمبيوتر المكتبية */
@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

يؤدي هذا إلى إنشاء تخطيط متجاوب: عمود واحد على الهاتف المحمول، وعمودان على الأجهزة اللوحية، و3 أعمدة على شاشات الكمبيوتر المكتبية.

جرّب بنفسك

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