Streaming live at 10am (PST)

Change grid span every other row in CMS grid

I’m trying to achieve a blog post design like this:

I want to change the grid span every other row.
In the first row, one image takes up the whole width and then in the next row, it has 2 images and the next row, again, one image takes up the whole width…(repeat)
something like this!

I don’t mind implementing some custom codes if necessary to achieve this design.
Thank you so much in advance!

Here is a pen of mine that accomplishes this design pattern using CSS Grid.

Hi Jeff
Thanks for your reply!
I just fixed my typo in the title. I meant “in CMS grid” not “CSS grid.” :persevere: Do you know how I can achieve this design with CMS? TIA!!! :pray:

The same way as my example which has multiple elements just like a collection list does.

I don’t know how/where I should change to implement this css with CMS. Will you explain it a little further? Thank you!!