Как сделать 1 блок слева и 2 блока справа на половину высоты?

Question

[DonorOfLove]

Сделать сетку с первой картинки я смог, но как сделать это все дело адаптивным, чтоб при увеличении сайта зеленый блок съезжал вниз и занимал 100% ширины страницы. Буду рад увидеть ваши варианты решения.

Answer 1

[young_smol]

В CSS, блокам задано свойство grid?

Comments

[DonorOfLove]

нет, через grid еще не пробовал, пытался реализовать через bootstrap. С grid системой мало знаком, поэтому буду признателен, если расскажите или покажите как выполнить поставленную задачу с ее помощью

[mikeyuriev]

DonorOfLove, вот здесь, например, можно поиграться - посмотреть на генерируемый css.

[young_smol]

mikeyuriev, Хороший сайт для наглядного примера

[DonorOfLove]

young_smol, mikeyuriev, чтож, потыкал я в грид и ничего принципиально нового не узнал, как я уже говорил, у меня есть сетка, реализованная с помощью bootstrap , но я не знаю, как реализовать переход от первой картинки ко второй

[mikeyuriev]

DonorOfLove, Если на гридах - на них очень удобно менять компоновку содержимого контейнера через media query. Например, так.
Вот, тут подробно всё расписано.

[DonorOfLove]

mikeyuriev, большое спасибо, вы меня очень выручили и показали направление. И еще один вопросик: можно ли это удобно реализовать на bootstrap'e, на сколько мне известно, грид система там работает по схожему принципу

[mikeyuriev]

DonorOfLove, В бутстрапе грид-система на флексах реализована.

Answer 2

[MrFreeNick]

https://youtu.be/x843xbMXkfc

очень понятное и полезное видео для обучения адаптивной вёрстке по моему скудному мнению