How do I get a responsive layout while still being designed as shown in the image? What do I mean by responsive layout. That the elements, when there is no space, move to a new row, while remaining in a zigzag pattern.
[image]
based on that layout there, with the circles overlapping one row to the next, my immediate response is “with Javascript.”
Like @m_hutley said, you can’t do it in straight css. You need some JS as well.
Here is a quick and dirty example. It has a bug I don’t have time to flesh out where the wrap detection gets squirrelly when the circles aren’t wrapping consistently (one row has four, the other three for example).
I highlighted the wrapped element to make it easier to see how it’s done…
2 Likes
There are a few of those designs around and an interesting one with floats.
(The grid version is also linked from that article).
This was a quick fork and play around of that first demo.
Seems to work ok but of course untested
5 Likes
Thank you guys so much, you have helped me a lot. Thank you for your quick response. I am new to this 
.
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.