Сетка карточек

Часть раздела Practical Frontend путешествия по HTML на Coddy — урок 27 из 35.

Сетка карточек (Card Grid) — это распространенный адаптивный паттерн, используемый на сайтах электронной коммерции, в портфолио или блогах. Она упорядочивает элементы (такие как товары, статьи или профили) в виде равномерно расположенных карточек. Каждая карточка обычно содержит изображение, заголовок, текст, а иногда кнопку или ссылку.

Этот макет часто создается с помощью CSS Grid или Flexbox, чтобы количество карточек в ряду менялось в зависимости от размера экрана (например, 1 колонка на мобильных устройствах, 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>
  <!-- More product cards here -->
</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 для макета.
На мобильных устройствах (маленькие экраны) отображайте 1 карточку в ряду.
На планшетах отображайте 2 карточки в ряду.
На компьютерах отображайте 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;
}

Это создает адаптивный макет: 1 колонка на мобильных устройствах, 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>