How to arrange intersected sections with variable heights [duplicate] - css

Question

This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 11 months ago.
I have a report that has to be in blocks (divs), these divs must be aligned horizontally (with width of 50% for each), meaning that the second is to right of the first, and the third must be below the first one regardless of the height of the second.
My description might be a little fuzzy, so I attached an image that represents the idea:
Sample:
Thank you very much in advance.
I tried normal CSS hacks (float, position, display) and so on; and it didn't work.
I tried grid layout, and I tried to use Bootstrap properties; in all the above, block number 3 starts, yes, below block one but after the end of block number 2 height.

Answer 1

Try this:
.maindiv { /* Masonry container */
column-count: 2;
column-gap: 1em;
}
.item { /* Masonry bricks or child elements */
display: inline-block;
margin: 0 0 1em;
width: 100%;
}

Answer 2

here's a quick way of doing it with flexbox, link to codepen. The downside is that you would need to have 2 columns, so on mobile, the second col would go below the first one. Ideally, you would do this with CSS Grid, or JS Masonry plugin
And here's the code itself:
HTML:
<div class="example-wrap">
<div class="col">
<div class="card" style="height: 100px;"></div>
<div class="card"></div>
<div class="card" style="height: 400px;"></div>
</div>
<div class="col">
<div class="card"></div>
<div class="card" style="height: 400px;"></div>
<div class="card" style="height: 150px;"></div>
</div>
CSS:
.example-wrap {
display: flex;
width: 600px;
justify-content: space-between;
align-items: flex-start;
box-shadow: 0 0 0 1px black;
}
.col {
width: calc((100% - 30px) / 2);
}
.card {
width: 100%;
height: 300px;
box-shadow: 0 0 0 1px red;
margin-bottom: 30px;
}

Answer 3

Masonry is the best way to do what you want.
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.grid-item',
columnWidth: 200
});
// element argument can be a selector string
// for an individual element
var msnry = new Masonry( '.grid', {
// options
});
.grid-item {
width: 40%;
margin: 20px;
border: 1px solid black;
height: 100px;
text-align: center;
color: red;
font-weight:700;
}
.height-2 {
height:300px;
}
<script src="https://unpkg.com/masonry-layout#4.2.2/dist/masonry.pkgd.min.js"></script>
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item height-2">2</div>
<div class="grid-item height-2">3</div>
<div class="grid-item">4</div>
</div>
See Masonry for more options/methods : https://masonry.desandro.com/