Верстка без боли: сетки, адаптив, доступность

Коротко. 90% вёрстки закрывают два инструмента: Flexbox для раскладки в одну ось (строка/колонка) и Grid для двумерных сеток. Добавьте адаптив (относительные единицы, media-запросы) и базовую доступность — и интерфейсы перестанут «разъезжаться». Вёрстка — первый навык фронтендера, и её проверяют тестовым почти всегда.

Flexbox: строки и колонки

Flexbox выравнивает элементы по одной оси. Типовой центрирующий контейнер:

.row {
  display: flex;
  gap: 16px;
  align-items: center;      /* по вертикали */
  justify-content: space-between; /* по горизонтали */
}

Запомните: justify-content — вдоль главной оси, align-items — поперёк. Свойство gap заменяет отступы между элементами и избавляет от возни с margin.

Grid: сетки

Grid — для двумерных раскладок (строки и колонки одновременно). Адаптивная сетка карточек без media-запросов:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

Такая сетка сама переносит карточки в зависимости от ширины экрана. На практике Flex и Grid комбинируют: Grid — общий каркас страницы, Flex — выравнивание внутри блоков.

Адаптивность

• ✅ Относительные единицы: rem/em, %, а не только px.
• ✅ Подход mobile-first: сначала мобильные стили, потом media-запросы для широких экранов.
• ✅ Гибкие картинки: max-width: 100%.

@media (min-width: 768px) {
  .container { padding: 0 40px; }
}

Доступность (a11y)

• ✅ Семантические теги: header, nav, main, button — вместо div на всё.
• ✅ Атрибут alt у картинок, label у полей формы.
• ✅ Достаточный контраст текста и видимый фокус для навигации с клавиатуры.

Доступность — это и про SEO, и про то, что интерфейсом смогут пользоваться все, включая людей со скринридерами. На собеседовании базовый a11y — заметный плюс, который отличает вас от «верстальщика дивами».

Как тренировать вёрстку

Вёрстка ставится только руками. Рабочий план на 3–4 недели:

1. Пройдите интерактивные тренажёры — Flexbox Froggy и CSS Grid Garden закрепляют раскладку за вечер каждый.
2. Свёрстайте 3–5 реальных макетов из Figma (лендинги, дашборды) — именно это дают на тестовом.
3. Проверяйте адаптив на трёх ширинах: мобильный, планшет, десктоп.
4. Прогоните итог через Lighthouse и валидатор — заодно подтянете производительность.

Частые ошибки

• ❌ Вёрстка всего на абсолютном позиционировании.
• ❌ Фиксированные ширины в px вместо гибких.
• ❌ div вместо button/a — ломает доступность и навигацию с клавиатуры.
• ❌ Игнор мобильных экранов до самого конца.

Чеклист перед «готово»

• адаптив 320 / 768 / 1280 без горизонтального скролла;
• фокус с клавиатуры виден, tab-порядок логичный;
• img с width/height или aspect-ratio (меньше CLS);
• контраст текста достаточный;
• формы: label, ошибки, type=email/tel где нужно.

Сетка: Flex для одномерных рядов, Grid для двумерных раскладок. Не боритесь с float. После вёрстки — немного JS и доступ к API: состояние и API.

Следующий шаг во фронтенде

Примените идеи из «Верстка без боли: сетки, адаптив, доступность» к своему учебному проекту или к одной вакансии на этой неделе. Сделайте маленький артефакт в git: компонент/страница с адаптивном, один fetch к API, обработка loading/error. Карта обучения: карта фронтенда, полный план — старт 2026, проекты — React для портфолио. Обзор роли — frontend starter.

Как применить «Верстка без боли: сетки, адаптив, доступность» на практике

Пройдите материал не как статью, а как задание. Выпишите 3 тезиса из разделов (Flexbox: строки и колонки; Grid: сетки; Адаптивность) и напротив каждого — действие на 30–90 минут: что сделаете руками, какой файл/репозиторий появится, как поймёте что готово. Без этого колонки «изучил» в голове не конвертируются в оффер.

Связка с соседними материалами: производительность, состояние и API, карта фронтенда, старт 2026, React для портфолио. Не читайте всё подряд — возьмите один следующий URL и закройте его артефактом в git до конца недели. Если роль ещё не выбрана, сначала профессии и 5 вакансий-ориентиров, потом возвращайтесь к этой теме.

На собеседовании по теме «Верстка без боли: сетки, адаптив, доступность» вас почти всегда просят пример из практики. Подготовьте 60–90 секунд: задача → что сделали → результат/ограничение. Даже учебный пример звучит сильнее пересказа теории.

Частые вопросы

Flexbox или Grid — что учить?
Оба. Flex — для одномерных раскладок, Grid — для сеток. На практике их комбинируют.

Нужны ли CSS-фреймворки джуну?
Сначала научитесь чистому CSS. Tailwind/Bootstrap ускоряют работу, но без понимания основ станут «костылём».

Что дальше после вёрстки?
JavaScript, затем React. См. что учить фронтендеру.

Обязательно ли знать препроцессоры (SASS)?
Для джуна — нет. Сначала чистый CSS; SASS осваивается за пару часов, когда понадобится.

Материал «Верстка без боли: сетки, адаптив, доступность» имеет смысл только вместе с практикой: один артефакт в git на этой неделе важнее десяти вкладок с теорией. Если застряли на выборе роли — начните с профессий и одной вакансии-ориентира.