Repeat CSS grid with UI?

This topic contains 3 replies, has 2 voices, and was last updated by  Sebastian 1 week, 3 days ago.

Author Posts

1101blueli

Hello, Please take a look below images

#1 Is it possible to repeat the same order after the second image.?
https://ibb.co/tqv3CFc

#2 similar to #1, say I want to repeat the same pattern via the UI, is it doable?
https://ibb.co/FK6DKhD

Many Thanks!!


Sebastian

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:

:nth-child(3n+1)

So your selector will look something like this:

.grid-item:nth-child(3n+1)

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.

Thanks,
Sebastian


1101blueli

Yes
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.


Sebastian

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

You must login or register to reply to this topic.