Анатомия лейаута: контейнер, секции, поток

Лейаут — это скелет страницы. Прежде чем красить, надо понять, как расставлены кости: контейнер, секции, поток сверху вниз.

«Контент — это король, но лейаут — это трон, на котором он сидит».

Любая страница — это поток блоков сверху вниз: шапка, основной контент, подвал. Браузер по умолчанию выкладывает блоки именно так — это нормальный поток. Веб-дизайн начинается с того, чтобы этот поток организовать, а не воевать с ним.

Контейнер и его ширина

Текст шириной во весь 27-дюймовый монитор нечитаем: глаз теряет начало следующей строки. Поэтому контент кладут в контейнер с ограниченной максимальной шириной (обычно 1100–1280px), центрированный по горизонтали. Фон секции при этом может быть на всю ширину.

  ТИПОВОЙ СКЕЛЕТ СТРАНИЦЫ
  -----------------------
  +----------------------------------------+
  | header (фон на всю ширину)             |
  |   +------------------------------+     |
  |   | контейнер max-width 1200     |     |
  |   +------------------------------+     |
  +----------------------------------------+
  | main                                   |
  |   +------------------------------+     |
  |   | секция: hero                 |     |
  |   +------------------------------+     |
  |   | секция: features             |     |
  |   +------------------------------+     |
  +----------------------------------------+
  | footer                                 |
  +----------------------------------------+

Семантически каркас выражают тегами, а не безликими div-ами — это важно для доступности и SEO:

<header>
  <nav>...</nav>
</header>
<main>
  <section class="hero">...</section>
  <section class="features">...</section>
</main>
<footer>...</footer>

А ограничение ширины — пара строк CSS:

.container {
  max-width: 1200px;
  margin-inline: auto;   /* центрируем */
  padding-inline: 24px;  /* воздух по краям на мобильном */
}

Разбор глубже: поток как союзник, а не враг

Главная ментальная ошибка новичков, пришедших из графики, — попытка «расставить» элементы по координатам, как в Photoshop. Они тянутся к абсолютному позиционированию, потому что оно даёт иллюзию контроля «пиксель в пиксель». Но веб устроен иначе: его сила — в нормальном потоке, где блоки сами выкладываются сверху вниз и сами раздвигаются под контент. Когда вы работаете с потоком, длинный текст просто переносит соседние блоки ниже, и ничего не ломается. Когда вы воюете с потоком через absolute, длинный текст вылезает поверх соседей — потому что вы прибили координаты намертво.

Контейнер — это первое архитектурное решение любого макета, и оно касается читаемости. Существует устойчивое наблюдение: комфортная ширина текстовой колонки ограничена, потому что глазу тяжело возвращаться к началу очень длинной строки. Поэтому даже на гигантском мониторе контент не должен растягиваться во всю ширину. Приём «фон секции — на всю ширину, контент — в центрированном контейнере» решает это элегантно: цвет и фоновые изображения создают ощущение масштаба, а текст остаётся в удобной для чтения колонке.

Семантическая разметка каркаса — это не педантизм, а инвестиция. Скринридер строит по тегам header/nav/main/footer карту страницы и позволяет незрячему пользователю прыгать по разделам, как зрячий прыгает глазами. Поисковики используют ту же структуру, чтобы понять, где основной контент, а где навигация. Каркас из голых div лишён этих смыслов — для машины это однородная стена блоков. Поэтому профессионал сначала выбирает правильный тег по смыслу, и только потом стилизует его.

Как делают ПЛОХО

Растягивают текст на всю ширину экрана, верстают всё на абсолютном позиционировании, ломая нормальный поток. Каркас собран из десятка вложенных div без смысла — скринридер видит «блок-блок-блок».

Как делают ХОРОШО

Контент в центрированном контейнере с разумной max-width. Каркас — семантические header/main/section/footer. Поток сверху вниз сохранён, а позиционирование используют точечно, а не как основу лейаута.

Чек-лист

Контент ограничен по ширине и центрирован.
Есть padding по краям, чтобы текст не липнул к границе экрана.
Каркас собран из семантических тегов, а не голых div.
Лейаут опирается на нормальный поток, а не на абсолютное позиционирование.

Итог. Лейаут — это контейнер + секции в нормальном потоке. Ограничьте ширину, центрируйте, используйте семантику — и скелет готов держать любой контент.