Урок 34. Примеры: Mobile-first подход

Каждый пример показывает один результат двумя статичными превью: слева «как на телефоне» (узкая колонка), справа «как на десктопе» (широкая, с дополнительными колонками). Рядом — код @media (min-width), который и переключает эти состояния по ширине окна. Подробнее о приёме — в теории.

1. Сетка контента: 1 колонка → 2 колонки

Базово .content-grid — одна колонка. С min-width: 64rem добавляется боковая колонка aside.

/* база: одна колонка */
.content-grid {
  display: grid;
  gap: 1rem;
}

/* десктоп: основной блок + боковая колонка */
@media (min-width: 64rem) {
  .content-grid {
    grid-template-columns: minmax(0, 1fr) 18rem;
  }
}

2. Навигация: вертикальное меню → горизонтальное

На телефоне пункты идут столбиком (display: grid), на планшете выстраиваются в строку (display: flex).

/* база: пункты столбиком */
.nav {
  display: grid;
  gap: 0.5rem;
}

/* планшет+: пункты в строку, прижаты вправо */
@media (min-width: 48rem) {
  .nav {
    display: flex;
    justify-content: flex-end;
  }
}

3. Шапка: логотип над меню → логотип и меню в строку

Базово .site-header — grid в одну колонку. С 48rem две колонки: auto под логотип и 1fr под меню.

/* база: логотип над меню */
.site-header {
  display: grid;
  gap: 1rem;
}

/* планшет+: в одну строку */
@media (min-width: 48rem) {
  .site-header {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
}

HTML-структура примера

Порядок в разметке тоже mobile-first: главный контент (article) идёт первым, второстепенное (aside) — после. На телефоне важное оказывается выше.

<header class="site-header">
  <a class="logo" href="#">HTML & CSS</a>
  <nav class="nav">Главная Практика Справочник</nav>
</header>
<main class="content-grid">
  <article>Главный материал</article>
  <aside>Дополнительно</aside>
</main>