Есть набор задач вёрстки, которые повторяются от проекта к проекту почти без изменений — и для каждой из них уже есть проверенное решение, которое достаточно один раз понять, чтобы больше не изобретать заново. Липкий футер — одна из самых частых среди них.
Проблема звучит так: если контента на странице мало, подвал сайта повисает где-то в середине экрана вместо того, чтобы прижаться к низу. Решается это через минимальную высоту в весь экран у обёртки страницы и flex-раскладку в колонку, где центральный блок с контентом растягивается на всё оставшееся свободное место.
Ещё одна классическая задача — равные по высоте карточки в ряд, даже если текста внутри них разное количество. До Flexbox это решалось только хитрыми приёмами вроде отрицательных отступов, а сегодня карточки в flex-контейнере с направлением строки автоматически выравниваются по высоте самой длинной среди них.
Прилипающая при прокрутке боковая панель — задача, с которой отлично справляется position sticky без единой строчки JavaScript. Панель ведёт себя как обычный элемент в потоке документа, пока не достигнет заданной границы, а дальше остаётся на месте до конца своего родительского контейнера.
Двухколоночный макет с боковой панелью фиксированной ширины и основным контентом на оставшееся пространство — тоже частая задача, которая на Grid решается буквально одной строкой через комбинацию фиксированного значения и fr для эластичной колонки.
Знание таких готовых паттернов заметно ускоряет работу — вместо того чтобы каждый раз решать задачу с нуля, достаточно узнать в новом макете уже знакомую структуру и применить проверенный приём.
Коллекция готовых решений для частых задач вёрстки с примерами кода собрана на странице паттернов раскладки на web.dev.
