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

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

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

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

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

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

Grid: сетки

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

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

Такая сетка сама переносит карточки в зависимости от ширины экрана.

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

• ✅ Относительные единицы: 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, и про то, что интерфейсом смогут пользоваться все.

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

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

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

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

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

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