d0ublezer0

Как на bootstrap 4 собрать такую сетку?

Recommended Posts

 

IuI5iCaTSOy1Xp-nQBf61g.png

Это вообще возможно?

Мои попытки родили такую конструкцию, но она не работает, как и ожидалось:

    <div class="row">
            <div class="col-md-9">
                <div class="row">
                    <div class="col-md-3"></div> <!--тут уже не выходит - размеры считаются по родителю-->
                    <div class="col-md-9"></div>
                </div>
                <div class="row">
                    <div class="col-md-9"></div>
                    <div class="col-md-3"></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="row"></div> <!--Вот это должно быть половину высоты-->
                <div class="row"></div>
            </div>
        </div>
    

 

Share this post


Link to post
Share on other sites

Нет. 

У вас тут скорее всего какой нибудь masonry надо использовать. 

Нет. 

У вас тут скорее всего какой нибудь masonry надо использовать. 

Для размеров блоков, сетка скорее всего подойдёт. А сами блоки надо будет тем плагином раскидывать, или как то иначе.

Или гриды, наверно.

Ну или всего блоки в одной строке и им флоат: лефт. и может встанут, как надо.

Share this post


Link to post
Share on other sites

masonry это идеально точное решение, а так можно и первое решение. если md-9 и md-3 не подходят, можно ж использовать col-auto и col

Share this post


Link to post
Share on other sites

https://codepen.io/hesrun/pen/EeYzBz

Сетку такую сделать можно и бутстрапе... Вопрос что будет храниться в блоках.
Если они под картинки, то можно высоту зафиксить, или прописать адаптивные единицы типа wh wv...
Если речь  идет о гибкой высоте блоков, то можно написать скриптик на js который будет прописывать им высоту наибольшему. 

Edited by vladmih

Share this post


Link to post
Share on other sites
1 час назад, vladmih сказал:

Если они под картинки

Под картинки, да. Это будут блоки разделов на главной

Edited by d0ublezer0

Share this post


Link to post
Share on other sites
56 минут назад, d0ublezer0 сказал:

Под картинки, да. Это будут блоки разделов на главной

Вот с картинками https://codepen.io/hesrun/pen/EeYzBz
Тогда не вижу причин не делать это на бутстрапе...
На mansory, вам тоже придется писать доп классы, для высоких и низких блоков.
если вам нужно чтоб и высота менялась вместе с шириной, высоту прописывайте в vw и будет счастье...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,293
    Total Members
    3,128
    Most Online
    Foxyded support
    Newest Member
    Foxyded support
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.