Урок 32. Решения: Адаптивная, резиновая и отзывчивая вёрстка

📁 Раздел: Адаптивная вёрстка ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя
#max-width #min #width #clamp #margin-inline

⚡ Кратко

Резиновый контейнер с пределом (min(100% - 2rem, 72rem)) + сетка карточек на auto-fit/minmax(). Тянется плавно, на узком экране — один столбец, без media queries.

Возможное решение

Ниже не единственный правильный вариант, но он показывает рабочую идею урока без лишних зависимостей. Сначала — живой результат, под ним код.

Гибкий учебный макет
Контейнер тянется до предела, отступы растут с шириной.
Карточка 1
Карточка 2
Карточка 3
📄 lesson-32/solution.html
<main class="page">
  <section class="hero">
    <h1>Гибкий учебный макет</h1>
    <p>Контент задаёт реальные ограничения.</p>
  </section>
  <div class="card-grid">
    <article class="card">Карточка 1</article>
    <article class="card">Карточка 2</article>
    <article class="card">Карточка 3</article>
  </div>
</main>
📄 lesson-32/solution.css
.page {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.hero {
  padding: clamp(2rem, 6vw, 6rem);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
Самопроверка: если при изменении ширины появляется горизонтальный скролл, вернитесь к ограничениям контейнера и ширине дочерних элементов.

Навигация