0

I have 5 items which run down the page on mobile:

<div class="flex flex-wrap flex-row">
  <div class="order-1">item 1</div>
  <div class="order-2">item 2</div>
  <div class="order-3">item 3</div>
  <div class="order-4">item 4</div>
  <div class="order-5">item 5</div>
</div>

But on desktop I want it to appear like this:

enter image description here

Note The width of columns are dynamic, and the height of the boxes are also dynamic.

I've tried both CSS Grid and Flexbox, but the problem is the equal columns on both strategies mean there are empty gaps between the items, which I don't want (notice the row gridlines do not line up).

I know this can be achieved with floats but I'm wanting to move away from that and only rely on flexbox/grid.

How might I achieve this?

Tallboy
  • 12,847
  • 13
  • 82
  • 173
  • look at masonry layout or CSS column ;) – G-Cyrillus Jul 20 '21 at 18:31
  • I don't think you can achieve this kind of floating boxes with flex but I'd love to be corrected – Huangism Jul 20 '21 at 18:40
  • actually, only Firefox can do this in CSS via **about:config** seting **`layout.css.grid-template-masonry-value.enabled`** to **true**. Then CSS will be : `.flex > div { color:red;border:solid;direction:ltr;.flex {direction:rtl;display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr);grid-template-rows: masonry; }` to match your requirement. For as now, you need the masonry javascript library or wait untill it becomes widely implemented. Could be weeks or years :( Here is an example for FF https://codepen.io/gc-nomade/pen/WNjEMwB if you did set this option to true for test – G-Cyrillus Jul 20 '21 at 19:02

0 Answers0