How can I achieve this design using display flex and one container for all items

In the image below, noticed how the second row doesn’t start at the same point as the first. How can I do this with CSS having all the items in one container?

Could you also share the code of that section to show what you are already doing?

1 Like

Just for fun I created this staggered layout using bare minimum HTML and flex box. I’m assuming that the order of the list items on the page read from left to right. Also assumed that there will always be only two items per row and that the width of the items are static.

Not saying flex box is the way to go here, just what I chose to use. Not saying this will work for your project, because I don’t know your requirements.

My codepen

1 Like

im not sure what you mean, but if you mean the gap between the first row and second row, you can add margin between the child items

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.