Post Category Grid With Dynamic Data In Staggered Layout

[whitemedia]

Hi,

I am trying to create a Pro grid for a blog category which places each post in a staggered row like in the screenshot below. The grid uses dynamic data and a looper provider. Is this possible to achieve?

Thanks,
Christopher

[ruenel]

Hello @whitemedia,

Thanks for writing in! With that kind of layout, it might not be possible with the Grid. You will have to use Row/Column elements instead. You will need two Row elements inside your Section/Row/Column (or any other container). Both Row elements will get items from the Looper Consumer The First Row will display the ODD items while the second Row is for the EVEN items.

In my Row element, I added this condition so that this Row will only display when the item is ODD. Similar and opposite condition is used for the EVEN row items.

And this is how it displays on my end:

If you use Grid, you would need two Grid elements with the same conditions for each Grid element as well.

Hope this makes sense.

[whitemedia]

Hi @Ruenel,

Thank you for the thorough example of how this could be achieved. It makes sense and does exactly what I was hoping could be achieved.

Many thanks,
Christopher

[ruenel]

You are most welcome, Christopher.