Repeat CSS grid with UI?

Author Posts


Hello, Please take a look below images

#1 Is it possible to repeat the same order after the second image.?

#2 similar to #1, say I want to repeat the same pattern via the UI, is it doable?

Many Thanks!!


Yes, I think both should be possible.

1. Simply set auto-flow to column and define two rows. The items will flow from top to bottom, starting a new column after two rows. To make the first item span multiple rows/columns, explicitly place it with drag and drop.

2. You should be able to achieve that pattern using :nth-child formulas. First, target all of the grid items and then use the CSS modifiers option to select an nth-child formula from the dropdown menu:


So your selector will look something like this:


That should select the 1st, 4th, 7th etc. Once you’ve created your selector, set the grid-column-end property to span 2. That should do it.

Let me know if you’re still stuck.



Thank you very much
I did also spent some extra time to master the whole CSS Grid from those amazing YouTuber for the past few days as well. Now I have much more understand working with the UI after I hand code some css myself.


Ah, that’s really great to hear. Thanks for the update!

You must login or register to reply to this topic.