День 27 | Верстаем информационный блок

Информационный блок с карточками

Информационные блоки используются для отображения преимуществ, особенностей, услуг и другой структурированной информации. Обычно информация представлена в виде карточек, расположенных в сетке.

Где используются информационные блоки?

• Блок "Наши преимущества"
• Особенности продукта
• Услуги компании
• Статистика и цифры
• Команда

HTML структура

<section class="info-section">
  <h2 class="section-title">Наши преимущества</h2>
  <div class="cards-grid">
    <div class="info-card">
      <div class="card-icon">⚡</div>
      <h3>Быстро</h3>
      <p>Оптимизированный код для максимальной скорости</p>
    </div>
    <div class="info-card">
      <div class="card-icon">⭐</div>
      <h3>Качественно</h3>
      <p>Современные технологии и лучшие практики</p>
    </div>
    <div class="info-card">
      <div class="card-icon">✨</div>
      <h3>Красиво</h3>
      <p>Современный дизайн и отличный UX</p>
    </div>
  </div>
</section>

CSS Grid для сетки

CSS Grid — это мощный инструмент для создания сеток. Он идеально подходит для карточек.

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

Разберём подробно:

• display: grid — делает элемент grid-контейнером
• grid-template-columns — определяет колонки
  • repeat() — функция для повторения паттерна
  • auto-fit — автоматически подстраивает количество колонок под доступное пространство
  • minmax(300px, 1fr) — каждая колонка:
    • Минимум 300px (если меньше — колонка переносится на новую строку)
    • Максимум 1fr (равномерно распределяет доступное пространство)
• gap: 30px — отступы между элементами (современная альтернатива margin)

Как это работает:

• Если ширина контейнера 900px, поместится 3 колонки по 300px
• Если ширина 600px, поместится 2 колонки
• Если ширина 400px, поместится 1 колонка
• Всё автоматически!

Практическое задание

1. Создайте информационный блок с карточками
2. Используйте CSS Grid для создания адаптивной сетки
3. Стилизуйте карточки с тенями и скруглениями
4. Добавьте hover эффекты (поднятие карточки)
5. Добавьте иконки (эмодзи или SVG)
6. Сделайте блок адаптивным