Какие CSS сетки используются для построения макетов
Что проверяют
Различаете ли вы инструменты раскладки и знаете ли, что выбирать под задачу. Следом обычно просят сравнить Grid и Flexbox и на словах сверстать адаптивную сетку карточек.
Как отвечать
Разделите ответ на встроенные механизмы CSS и готовые сетки поверх них.
- CSS Grid: двумерная раскладка, строки и колонки сразу. Главный инструмент для каркаса страницы:
grid-template-columns, единицаfr,grid-template-areasдля читаемых областей,subgrid, чтобы вложенные элементы выравнивались по сетке родителя; - Flexbox: одномерная раскладка, одна ось. Хорош внутри компонентов: шапка, панель кнопок, строка с иконкой и текстом;
- многоколоночная вёрстка (
columns): текст в несколько колонок, как в газете; - устаревшие приёмы:
floatс clearfix,inline-block,display: table. Встречаются в старом коде, их полезно узнавать, но новые макеты так не строят.
Готовые сетки: 12-колоночная сетка Bootstrap (в пятой версии она построена на флексбоксе), утилиты Tailwind вроде grid-cols-12. Это удобно для команды, но под капотом те же Flexbox и Grid. Дизайнерская сетка из макета, например 12 колонок с фиксированными промежутками, переносится в CSS через Grid с gap.
Покажите практический приём: grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) даёт адаптивную сетку карточек вообще без медиазапросов. Разницу auto-fill и auto-fit тоже стоит знать: второй вариант схлопывает пустые треки, и элементы растягиваются на всю ширину.
Медиазапросы и @container сами сеткой не являются: это способ перестроить сетку под ширину экрана или контейнера.
Где спотыкаются
Называют медиазапросы или Bootstrap отдельным видом сетки. Точнее сказать, что это надстройки над Grid и Flexbox.
Говорят «Grid заменил Flexbox». Они решают разные задачи и чаще всего работают вместе: Grid снаружи, Flexbox внутри компонента.
Верстают сетку карточек флексбоксом с процентной шириной и margin, а потом борются с последней неполной строкой, где карточки растягиваются. Grid с auto-fill решает это одним правилом.