פריסת רשת כרטיסים

חלק מהיחידה פיתוח Frontend מעשי במסלול ה-HTML של Coddy. שיעור 27 מתוך 35.

רשת כרטיסים היא תבנית רספונסיבית נפוצה המשמשת באתרי מסחר אלקטרוני, בתיקי עבודות או בבלוגים. היא מסדרת פריטים (כמו מוצרים, מאמרים או פרופילים) בכרטיסים המרווחים באופן אחיד. כל כרטיס מכיל בדרך כלל תמונה, כותרת, מעט טקסט, ולפעמים גם כפתור או קישור.

פריסה זו נבנית לעיתים קרובות באמצעות 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 עבור גלריית תמונות מטיולים. המשימה שלך היא ליצור רשת כרטיסים רספונסיבית שמתאימה לגדלים שונים של מסכים.

דרישות:

השתמשו ב-CSS Grid לפריסה.
במכשירים ניידים (מסכים קטנים), הציגו כרטיס אחד בכל שורה.
בטאבלטים, הציגו 2 כרטיסים בכל שורה.
במחשבים שולחניים, הציגו 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>