How to arrange intersected sections with variable heights

Question

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.

Please add the code that you've tried to the question, including your HTML and your (failed) CSS, see the "*[mcve],*" as well as the "*[ask],*" guidance. — David Thomas, Mar 22 '22 at 10:32

score -1 · Answer 1 · answered Mar 22 '22 at 10:35

-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%;
}

answered Mar 22 '22 at 10:35

Santiago

23
4

score -1 · Answer 2 · edited Mar 22 '22 at 10:42

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;
}

Pterrat · Answer 3 · 2022-03-22T10:52:42.397

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/

How to arrange intersected sections with variable heights

3 Answers3