Как сделать отзывчиво-адаптивную вёрстку?

Question

[CyberStoic]

Добрый день. Проходил курс по азам вёрстки, по окончании которого дали сделать выпускной двустраничный макет. Большие проблемы начались с адаптивом, так как не могу до конца вникнуть в его реализацию на флексах. Для примера вот одна из работ . При выборе любого размера экрана все элементы встают идеально с учетом боковых отступов.

Можете подсказать общую основу/алгоритм такой реализации, чтобы страница плавно сжималась при изменении ширины экрана, не оставляя белые полосы по бокам, а при достижении брейкпоинта элементы адаптировались, продолжая быть "резиновыми" до след. контрольной точки?

Пересмотрел кучу роликов на ютубе, но из абстрактных примеров у меня картинка не складывается. Готовые сетки вроде flexboxgrid2 или фреймворки не хочу пока использовать, чтобы лучше понять основу.

Comments

[Ankhena]

В примере просто меняется ширина дочерних элементов на разных вьюпортах.

Можно сделать на гридах в одну строчку используя repeat и minmax.

но из абстрактных примеров у меня картинка не складывается

Вы вроде бы показали вполне конкретный пример, который можно изучить.

Обычно в таких макетах две проблемы:
- сам дизайн не очень готовый к такому поведению
- непонимание геометрии верстальщиком/дизайнером/заказчиком

[CyberStoic]

Evgenii, я не пойму как подходить к реализации такой вёрстки, т.е. конкретно эту страницу скопировав код я могу проанализировать, но это не поможет при подходе, например, к другому макету. Может есть какие-то общие принципы или рекомендации на этот счет? Как выстроить элементы/блоки, как задать отзывчивость+адаптив на брейкпоинтах и т.д. Или может вы какие-то материалы считаете полезными для ознакомления по теме, тоже бы пригодилось.

[CyberStoic]

Ankhena, какие бы вы материалы могли порекомендовать и по флекс сетке, и по гридам?

Я не на фронт учусь, но для будущих петов хочу понять реализацию без фреймворков и готовых сеток.

[Ankhena]

CyberStoic, по-моему, статьи про гриды и флексы есть на каждом более или менее крупном ресурсе про верстку.
Флексы:
https://yoksel.github.io/flex-cheatsheet/
css.yoksel.ru/flexbox
https://tproger.ru/translations/how-css-flexbox-works/
html5book.ru/css3-flexbox
Гриды:
https://yoksel.github.io/grid-cheatsheet/
https://css-live.ru/css/bolshaya-statya-pro-gridy-...
и т.д.

Игра по флексам https://flexboxfroggy.com/#ru
По гридам https://cssgridgarden.com/#ru

хочу понять реализацию без фреймворков и готовых сеток

Ну вот, изучайте возможности флексов и гридов и пишите именно те стили, которые нужны для каждого конкретного случая. Пробуйте разные варианты, смотрите какой оптимальнее (меньше кода или легче управляется или по какому-то ещё параметру).