Этап 4 из 19 · ≈ 10 ч

Раскладка — Flexbox, Grid, позиционирование

Основа с Junior

Как расставить элементы на странице — одномерный Flexbox, двумерный Grid и position.

Flexbox — раскладка по одной оси: строка кнопок, шапка, выравнивание по центру. Grid — по двум осям: сетка карточек, каркас страницы.

.toolbar { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.cards   { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

Что важно знать

  • Flex: главная и поперечная оси, flex: 1 (grow, shrink, basis), flex-wrap, почему элемент «не сжимается» (min-width: auto — лечится min-width: 0).
  • Grid: fr, repeat, minmax, auto-fill против auto-fit, именованные области grid-template-areas.
  • gap работает и во Flexbox, и в Grid — отступы между элементами без margin.
  • position: relative — сдвиг и точка отсчёта для потомков, absolute — от ближайшего позиционированного предка, fixed — от окна, sticky — прилипает при прокрутке внутри родителя.
  • z-index работает внутри контекста наложения; новый контекст создают position с z-index, opacity < 1, transform.

Критерии освоения

Junior ≈ 10 ч

  • Строит раскладки на Flexbox и Grid и выбирает подходящий инструмент
  • Использует position relative, absolute, fixed и sticky по назначению

Практика. Сверстать по макету страницу каталога — шапка, сетка карточек на Grid, фильтры на Flexbox, липкая панель.

Middle ≈ 4 ч

  • Объясняет контекст наложения и решает проблемы z-index
  • Решает проблему «элемент не сжимается» и переполнение во flex-контейнере

Практика. Разобрать и исправить 5 сломанных раскладок с проблемами z-index, переполнения и сжатия.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Чем Flexbox отличается от Grid и когда что использовать?Junior

Flexbox — одномерная раскладка: элементы в строку или столбец, распределение места и выравнивание вдоль оси; размеры идут от содержимого. Grid — двумерная: строки и столбцы одновременно, раскладка задаётся контейнером. Flex — панели, меню, ряды кнопок; Grid …

Полный разбор
Чем отличаются значения position — static, relative, absolute, fixed, sticky?Junior

static — обычный поток. relative — остаётся в потоке, сдвигается относительно своего места и становится опорой для absolute-детей. absolute — выпадает из потока, позиционируется относительно ближайшего позиционированного предка. fixed — относительно окна…

Полный разбор
Что такое блочная модель CSS и чем content-box отличается от border-box?Junior

Каждый элемент — прямоугольник из content, padding, border, margin. При content-box (по умолчанию) width задаёт только содержимое, а padding и border добавляются сверху. При border-box width включает padding и border — размеры предсказуемы, поэтому почти все…

Полный разбор
Какие единицы измерения есть в CSS и когда какие использовать?Junior

px — абсолютные пиксели; rem — от размера шрифта корня (html), em — от шрифта текущего элемента (вложенные em накапливаются); % — от размера родителя; vw/vh — проценты окна; clamp(min, предпочтительное, max) — плавное значение в границах. Шрифты и отступы…

Полный разбор
Как сделать адаптивную вёрстку?Junior

Гибкая раскладка (flex, grid с fr и minmax), относительные единицы (rem, %, vw, clamp), медиазапросы по ширине и адаптивные изображения (srcset, sizes). Mobile-first — базовые стили для узкого экрана, расширения через @media (min-width: ...).

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования