Один и тот же макет — двухколоночный на десктопе, одноколоночный на телефоне — можно описать двумя способами. Разница в том, что считается базой, и в направлении media query.
Direction: что мы делаем в media query
⚠️ Старый подход: desktop-first
Базой считается широкий макет с двумя колонками, а для телефона мы его «ломаем» через max-width: возвращаем блочную раскладку. Чем сложнее сайт, тем больше таких отмен и тем легче что-то забыть — отсюда горизонтальный скролл и нечитаемые карточки.
🖥️ база (десктоп): 2 колонки
main
side
📱 откусываем (max-width)
main
side
/* база = широкий макет */
.layout {
display: grid;
grid-template-columns: 1fr 18rem;
}
/* для телефона ломаем макет назад */
@media (max-width: 47.99rem) {
.layout {
display: block;
}
}✅ Современный подход: mobile-first
Базой становится простая гибкая одна колонка — она работает везде без media query. Двухколоночную раскладку добавляем только с min-width, где для неё действительно есть место. Меньше отмен, проще читать, ничего не «разваливается» на узком экране.
📱 база: 1 колонка
main
side
🖥️ достраиваем (min-width)
main
side
/* база = гибкая одна колонка */
.layout {
display: grid;
gap: 1rem;
}
/* добавляем вторую колонку, где есть место */
@media (min-width: 48rem) {
.layout {
grid-template-columns: minmax(0, 1fr) 18rem;
}
}Вывод: mobile-first — современный дефолт. Desktop-first не «запрещён», но оправдан редко (например, внутренняя десктопная панель) — об этом урок 35.