0

I have a page with cards of other pages that have same width and different height. I need each next card to be placed at the smallest current column. What I get now:

.card {
  width: 50%;
  margin: 0;
  float: left;
  height: 32px;
}
.a { background-color: red; }
.b { background-color: yellow; height: 80px; }
.c { background-color: green; }
.d { background-color: blue; }
.e { background-color: gray; }
<div class="card a">a</div>
<div class="card b">b</div>
<div class="card c">c</div>
<div class="card d">d</div>
<div class="card e">e</div>

And here I what I'm trying to achieve: "b" is placed next to "a" because 2nd column is smaller, then "c" is placed under "a" because 1st column is smaller, then "d" is placed under "c" because 1st column is still smaller, and "e" is placed under "b" cuz 2nd column is now smaller.

Desired result

Note: the width of the cards is set dynamically depending on screen width, so the solution should be dynamic and cannot depend on columns count (it may be 1-4 of them)

I googled a lot, but found nothing; I tried to apply flexbox to this, but it seems this technic can't help here. Is it possible at all w/o JS?

I've also seen Masonry, but it handles much more complicated cases, elements with different widths. My case is simpler, elements have same width so I hope there is a CSS solution...

AivanF.
  • 1,134
  • 2
  • 23
  • 52
  • same width or not, the issue is related to height and this is stil an Masonry layout – Temani Afif May 19 '20 at 15:37
  • @TemaniAfif the answer you link is interesting, BUT elements there have fixed height. And if I remove it, then they just have same height of the largest element, have a look: https://jsfiddle.net/bo08pyfs/ And in my case, elements should have different heights which is not predefined, but based on elements content. – AivanF. May 19 '20 at 15:48
  • from the duplicate : *In fact, until a CSS technology arrives with the ability to automatically close the gaps, CSS in general has no solution. Something like this would probably require reflowing the document, so I'm not sure how useful or efficient it would be. You'll need a script.* – Temani Afif May 19 '20 at 15:51

0 Answers0