Какие подходы и технологии используешь для верстки, например flexbox и grid

Что проверяют

Ориентируетесь ли вы в раскладках или собираете сетку тем, что первым вспомнилось. Вопрос звучит просто, но по ответу видно, где проходит граница вашего CSS: остановитесь на «flex для строки, grid для сетки» или дойдёте до контейнерных запросов. Следом обычно просят конкретику: как сверстать адаптивную сетку карточек без единого медиазапроса.

Как отвечать

Разделите инструменты по задачам:

• Flexbox: одна ось, размеры диктует содержимое. Тулбары, ряд кнопок, выравнивание иконки с текстом. Ключевое это flex-grow, flex-shrink, flex-basis и gap;
• Grid: две оси, сетку задаёт контейнер. Каркас страницы, галереи, формы в две колонки. grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) даёт отзывчивую сетку без медиазапросов, grid-template-areas читаемо описывает раскладку, subgrid выравнивает вложенные карточки по общим линиям;
• адаптивность: контейнерные запросы (container-type: inline-size и @container) вместо привязки к ширине окна, clamp() для плавной типографики, единицы dvh и svh вместо 100vh на мобильных;
• современный CSS: логические свойства (margin-inline, padding-block), :has(), вложенность, каскадные слои @layer, aspect-ratio.

Скажите, как организуете стили: CSS Modules, утилитарный Tailwind, БЭМ на старом проекте. Рантайм CSS-in-JS сейчас скорее избегают, он плохо дружит с серверным рендерингом.

Закончите практикой: тёмная тема через кастомные свойства, проверка на реальных устройствах, prefers-reduced-motion для анимаций.

Где спотыкаются

Верстают двумерную сетку на flexbox, а потом воюют с flex-basis и переносами. Grid здесь короче и предсказуемее.

Забывают про min-width: auto у флекс-элементов: длинное слово или таблица внутри растягивает контейнер и ломает страницу. Лечится min-width: 0 на элементе.

Считают, что Grid отменил Flexbox. Их используют вместе: Grid держит каркас страницы, Flexbox раскладывает содержимое ячейки.