Repeat CSS grid with UI?

Author Posts

1101blueli May 28, 2021 at 4:12 pm

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

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 May 30, 2021 at 8:00 pm

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 June 2, 2021 at 12:57 pm

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 June 2, 2021 at 2:06 pm

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

You must login or register to reply to this topic.