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

В каждом примере сверху — реальный результат, под ним код. Перетаскивай край окна браузера (или меняй ширину в DevTools), чтобы увидеть разницу между типами вёрстки.

1. Fixed — жёсткая ширина в пикселях

Блок всегда 320px. На широком экране — пустое место справа, на узком экране уже 320px — появится горизонтальный скролл.

.fixed-box {
  width: 320px;   /* жёстко, не реагирует на окно */
}

2. Fluid — резиновая ширина в процентах

Блок занимает 80% родителя. Сузь окно — он сузится пропорционально, расширь — растянется. Скролла не будет, но без предела строки станут длинными.

.fluid-box {
  width: 80%;   /* % от родителя — тянется вместе с окном */
}

3. Резиновость с пределом: max-width + width: 100%

Главный современный приём. Контейнер тянется (width: 100%), пока не упрётся в max-width: 600px, дальше остаётся фиксированным и центрируется через margin-inline: auto. Лучшее из двух миров.

.container {
  width: 100%;
  max-width: 600px;
  margin-inline: auto;   /* центрируем, когда упёрлись в предел */
}

4. Responsive-сетка: auto-fit + minmax()

Карточки сами перекладываются: при широком окне — несколько в ряд, при узком — в один столбец. Без единого media query — это делает repeat(auto-fit, minmax(...)). Сузь окно и увидишь, как количество колонок меняется.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: .75rem;
}

5. Полный гибкий макет (HTML + CSS)

Связка из теории: контейнер с пределом, «резиновые» отступы и шрифт через clamp(), сетка на auto-fit.

<main class="page">
  <section class="hero">
    <h1>Гибкий учебный макет</h1>
    <p>Контент задаёт реальные ограничения.</p>
  </section>
</main>

.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;
}