Урок 32. Старый vs Новый: Адаптивная, резиновая и отзывчивая вёрстка

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

⚡ Кратко

Раньше страницу верстали на жёстких 960px и float: на узком экране — скролл, карточки нельзя переложить. Сегодня — резиновый контейнер с пределом (max-width / min()) и сетка на auto-fit + minmax(), которая сама перекладывает колонки без media queries.

Старый подход: фиксированная ширина и float

Жёсткие 960px и колонки на float. На широком мониторе — пустые поля, на узком экране — горизонтальный скролл, а карточки не умеют перестраиваться в один столбец.

Карточка A (150px)
Карточка B (150px)

Ширина жёстко задана — на узком экране вылезет за край.

📄 lesson-32/old.css
.page {
  width: 960px;     /* жёстко: скролл на узком экране */
}

.card {
  width: 300px;     /* не сожмётся под контент */
  float: left;      /* устаревший способ колонок */
}

Современный подход: резина с пределом + auto-fit

Сначала гибкая основа: контейнер тянется до предела через min(), карточки раскладывает grid с auto-fit. Media query добавляют только там, где он реально улучшает содержимое (подробно — урок 33).

Карточка A
Карточка B
Карточка C
📄 lesson-32/modern.css
.page {
  width: min(100% - 2rem, 72rem);  /* резина до предела */
  margin-inline: auto;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;        /* сами перекладываются, без float */
}

Навигация