-1

I'm using Bootstrap 4.2 to create a relatively simple grid layout for a list of blog posts in a Wordpress theme.

I have one Card which is double height and I want to 'float' two other single-height cards to the right of it.

Before flex, I'd do this using floats, but now I can't find an answer on how to put two divs stacked to the right of one larger div.

Caveats: I want my boxes to display responsively at 4:3 ratio, so fixed height solutions won't work.

I've looked at A LOT of other pages and answers to similar questions but no-one seems to have found a fix to doing this using flex without specifying a fixed height.

Here's a diagram showing what I want to achieve (on the left) and what's displaying (on the right):

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
James
  • 1
  • What you asked for is called "Masonry". Simply put, assuming each element is siblings, you can't achieve that dynamically w/o float or CSS Grid (or script). If you can change markup and wrap 5 and 6 it will work though. – Asons Feb 09 '19 at 09:18

1 Answers1

0

This template can be made with CSS grid :

.boxes_container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(6, 1fr);
        
        /* The container can be any size, fixed or not */
        width: 300px;
        height: 400px; 
    }

    .box{
        border: solid 1px red;
        margin: 5px;
        
        /* Just to align text : */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .box:first-child{
        grid-column:1/4;
        grid-row:1/3;
    }

    .box:nth-child(5){
        grid-column:1/3;
        grid-row:4/6;
    }

    .box:nth-child(9){
        grid-column:2/4;
    }
<div class="boxes_container">
     <div class="box">
         Featured
     </div>
     <div class="box">1</div>
     <div class="box">2</div>
     <div class="box">3</div>
     <div class="box">4</div>
     <div class="box">5</div>
     <div class="box">6</div>
     <div class="box">7</div>
     <div class="box">8</div>
</div>
Manon
  • 329
  • 1
  • 8