Какие методы расположения элементов: flex, grid или float вы использовали чаще

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

Есть ли у вас реальная практика вёрстки и понимаете ли вы, какую задачу решает каждый инструмент. Вопрос про личный опыт, поэтому ждут не определения, а выбор с объяснением. Следом просят на словах разложить конкретный блок или спрашивают, когда grid лучше flex.

Как отвечать

Честный современный ответ: чаще всего flex и grid, float почти только для обтекания. Опишите это на своих проектах:

• flexbox: одномерная раскладка, строка или колонка. Навигация, кнопка с иконкой, центрирование, прижать элемент к краю через margin-left: auto. Отступы задаются через gap, в flex он работает во всех актуальных браузерах;
• grid: двумерная сетка, где важны и строки, и колонки. Каркас страницы через grid-template-areas, адаптивный каталог карточек через repeat(auto-fill, minmax(240px, 1fr)) без медиазапросов. subgrid выравнивает содержимое вложенных карточек по общей сетке и с конца 2023 года поддерживается всеми основными браузерами;
• float: обтекание картинки текстом в статье, иногда вместе с shape-outside. Для колонок он устарел, а старый clearfix заменяется на display: flow-root.

Полезное правило: если раскладка идёт от содержимого (сколько поместится в строку), это flex, а если от сетки (элементы должны встать в колонки), это grid. Их часто комбинируют: grid для каркаса, flex внутри ячеек.

Приведите свои примеры: какой компонент, почему выбрали этот способ, что получилось. Если float вы застали только в легаси, так и скажите, это нормально.

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

Отвечают «всегда flex». Карточки на flex с flex-wrap в последней строке не встают по колонкам, и приходится городить костыли там, где grid решает задачу одним свойством.

Не знают разницы между auto-fill и auto-fit: первый сохраняет пустые колонки, второй схлопывает их, и существующие элементы растягиваются на свободное место.

Называют float устаревшим целиком и не могут сказать, чем сделать обтекание текстом. Или, наоборот, до сих пор верстают колонки на float с clearfix.