Flexbox — одномерная раскладка: элементы в строку или столбец, распределение места и выравнивание вдоль оси; размеры идут от содержимого. Grid — двумерная: строки и столбцы одновременно, раскладка задаётся контейнером. Flex — панели, меню, ряды кнопок; Grid — каркас страницы, карточки в сетке, формы.
А ещё Их сочетают: grid для каркаса, flex внутри ячеек
Так подсказку видит пользователь sotto на живом собеседовании — за пару секунд, пока вы думаете вслух.
Flexbox: главная ось (flex-direction), justify-content — вдоль неё, align-items — поперёк. flex: grow shrink basis управляет распределением свободного места; flex-wrap переносит элементы, но каждая строка раскладывается независимо — столбцы не выравниваются.
Grid: grid-template-columns/rows, единица fr (доля свободного места), minmax, repeat(auto-fill, ...) — адаптивная сетка без медиазапросов; именованные области grid-template-areas; элементы можно размещать в любые ячейки.
Правило выбора: важен поток содержимого в одном направлении — flex; важно выравнивание по строкам и столбцам сразу — grid.
sotto.center { display: grid; place-items: center; }
.toolbar { display: flex; gap: 8px; align-items: center; }
.toolbar .spacer { flex: 1; }
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}sotto слышит вопрос интервьюера и показывает короткий ответ и план, как в блоке «Коротко». Оставьте контакт — пришлём доступ и промокод.