Place each div on the "most left" possible preserving order

Question

I would like to create a page where each div is to the "most left" possible, I don't know how to explain it, so I've created 3 example images

I could use a simple float: left but in that case in the second image the div 4 would be placed at the right of div 2

Does anyone have any advice? I can also use bootstrap if it can help me in this case

Learn flexbox - it will probably be easier to achieve this with flexbox than floats. — Barney, Nov 23 '17 at 23:08
I don't think there is **any** layout method that can do this...not even CSS-Grid. My initial thought is that you will need Javascript. — Paulie_D, Nov 24 '17 at 11:30
Related - https://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view — Paulie_D, Nov 24 '17 at 11:31

score -1 · Answer 1 · answered Nov 23 '17 at 23:35

-1

If I understand your issue correctly the effect can be achieved with grid-area, I recently watched a tutorial by Morten Rand-Hendriksen which was really helpful

answered Nov 23 '17 at 23:35

Acadiandreamer

35
3

but grid-area is like setting each element with position: absolute and the elements will not be reorder during resizing, right? – davidinho Nov 24 '17 at 00:03

Place each div on the "most left" possible preserving order

1 Answers1