nmk

Лабораторне заняття №5 (2 години). Створення багатоколонкового адаптивного макету (CSS Grid).

Мета

Навчитись використовувати технологію CSS Grid для побудови складних двомірних макетів сторінок інтернет-магазину. Реалізувати бічний сайдбар з фільтрами та адаптувати сайт під планшети та мобільні телефони за допомогою Медіа-запитів (@media).

План

Створення макету зі стовпцями: “Сайдбар” та “Основний контент” (grid-template-columns).
Оформлення блоку фільтрів у aside.
Побудова сітки продуктів за допомогою функції repeat(auto-fill, ...) без Flexbox.
Написання адаптивних медіа-запитів (@media (max-width: 768px)).
Тестування в інструментах розробника (Chrome DevTools Mobile View).

Хід роботи

Увага: Продовжуємо роботу над інтернет-магазином “TechShop”.

Базова розмітка Сайдбару (HTML):

У вашому <main> потрібно змінити структуру. Обгорніть весь <div class="products-grid"> та додайте поруч бічну панель <aside class="sidebar">.

Загальна структура має бути такою:

<main class="page-layout">
  <aside class="sidebar">
    <h3>Фільтри</h3>
    <!-- Тут будуть чекбокси категорій, напр. Ноутбуки, Смартфони -->
    <ul>
      <li><input type="checkbox" /> Ноутбуки</li>
      <li><input type="checkbox" /> Смартфони</li>
    </ul>
  </aside>

  <section class="products-content">
    <h2>Популярні товари</h2>
    <div class="products-grid">
      <!-- Ваші картки <article> -->
    </div>
  </section>
</main>

Головний макет сторінки (CSS Grid):
- Замість Flexbox застосуємо CSS Grid до контейнера .page-layout:
```
.page-layout {
  display: grid;
  /* Перша колонка (сайдбар) - 250px, друга (контент) - бере решту місця (1fr) */
  grid-template-columns: 250px 1fr;
  gap: 2rem;
  padding: 2rem 5%;
}
```
- Задайте стилі для .sidebar: додайте фоновий колір, padding, border-radius, щоб він візуально відділявся від карток товарів.
Оновлення Сітки Карток Товару (CSS Grid замість Flexbox):
- У попередній роботі .products-grid був Flexbox-елементом. Давайте зробимо його ідеальним CSS Grid. Видаліть/перекрийте старі flex-стилі:
```
.products-grid {
  display: grid;
  /* Магічна формула: Автоматично розставляй картки з мінімальною шириною 280px та розтягуй до 1fr */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}
```
- Перевірте в браузері: Тепер картки товарів самі автоматично звужуються і переносяться без порожніх місць по правому краю!

Адаптивний дизайн (Media Queries): Що станеться на мобільному телефоні (ширина менше 768px)? Сайдбар шириною 250px зімне контент. Нам потрібно “поламати” сітку і поставити Сайдбар НАД товарами.

У кінець файлу style.css додайте медіа-запит:

@media screen and (max-width: 768px) {
  .page-layout {
    /* Перемикаємо на один стовпець: сайдбар і контент будуть один під одним */
    grid-template-columns: 1fr;
  }

  /* Можна також сховати логотип по центру в хедері для економії місця (як приклад) */
  .header {
    flex-direction: column;
    gap: 1rem;
  }
}

Збереження (Commit & Push):
- Відкрийте Chrome DevTools (F12), увімкніть емуляцію мобільних пристроїв і перевірте, як ламається сітка при зміні розміру вікна.
- Виконайте git add . та git commit -m "Implement CSS Grid layout and Mobile responsiveness".
- Запушіть у свою гілку та злийте в main.

Результат

Сторінка “TechShop” перетворилася на повноцінний двоколонковий макет для десктопу (з фільтрами збоку та ідеальною сіткою товарів), який елегантно складається в один стовпець на мобільному телефоні.

Контрольні питання

Чому для створення макету “Сайдбар + Контент” CSS Grid вважається кращим вибором, ніж CSS Flexbox?
Що означає значення 1fr у правилі grid-template-columns: 250px 1fr;?
Поясніть “магію” комбінації repeat(auto-fill, minmax(300px, 1fr)). Що відбувається, коли екран стає дуже широким? А коли вузьким?
З якої ширини екрану (до якої межі) спрацює правило, що лежить всередині @media (max-width: 768px)?
Назвіть 3 популярні контрольні точки (Breakpoints) для написання адаптиву: мобільний, планшет, десктоп. Які значення в пікселях є станартом у 2025?