Каркас страницы на Grid
Вопрос
Как бы ты сверстал каркас страницы «шапка, сайдбар, контент, подвал» на Grid так, чтобы на мобильном сайдбар уходил под контент?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Контейнер `display: grid` с `grid-template-areas` и колонками вроде `240px minmax(0, 1fr)`
Элементам задаются `grid-area` по именам областей
На узком экране в медиазапросе переопределяется только `grid-template-areas` и колонки, разметка не меняется
`minmax(0, 1fr)` или `min-width: 0`, чтобы длинный контент не распирал колонку
Строка контента `1fr` и `min-height: 100dvh`, чтобы подвал прижимался к низу
Визуальный порядок не должен противоречить порядку в DOM для клавиатуры
Что могут спросить следом
- Почему именно
minmax(0, 1fr), а не1fr? - Что будет, если область в шаблоне не прямоугольная?
- Чем
dvhотличается отvh?
Разбор
Я бы сделал контейнер сеткой из двух колонок 240px minmax(0, 1fr) и трёх строк auto 1fr auto, а раскладку описал через grid-template-areas: сверху header на обе колонки, в середине sidebar и main, снизу footer на обе колонки. Каждому блоку назначаю grid-area. Чтобы подвал прижимался к низу на коротких страницах, даю контейнеру min-height: 100dvh, и средняя строка 1fr забирает лишнее место. Для мобильного в медиазапросе меняю одну колонку и шаблон: header, main, sidebar, footer друг под другом. Разметку трогать не нужно. Колонку контента делаю minmax(0, 1fr), потому что обычный 1fr не сжимается меньше содержимого, и длинная таблица или ссылка дали бы горизонтальный скролл. Слежу, чтобы порядок в DOM совпадал с логичным порядком чтения: сначала основной контент, потом сайдбар, иначе пользователь клавиатуры будет прыгать фокусом.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.