Domino (2fr 1fr 1fr) grid + JSON looper

Support
#1

Hello, i try to make a looper with a grid but it’s not working.
I have enabled the looper consumer on the cells and the looper provider on the grid, i’m doing it wrong i guess because results are that all images and texts are on the first cell only.
How to have one image per cell with JSON looper?

#2

Hello @Lyser,

Thank you for your inquiry.

Edit the Cell element with the Looper Consumer, then make sure the Layout fields are set to default or left blank. Please check the screenshot below.

Screenshot 2025-06-06 at 11.31.29 PM
Screenshot 2025-06-06 at 11.31.29 PM646×1240 41.3 KB

Let us know the result.

Best regards,

#3

Thx for the screenshot, sorry i wasn’t clear enough in first post, the goal was to get the same cell disposition as the default grid configuration like this :
First left image is latest product and bigger for better visibility and 4 others on right side

grid-disposition
grid-disposition1119×583 33.8 KB

Actually the results are like this :

grid-disposition-with-modifs
grid-disposition-with-modifs1382×1124 136 KB

#4

Hey @Lyser,

You can only display up to 5 itema per Grid if you want to display like in the first screenshot of the Grid layout. You will have to set the following:

Grid - Looper Provider
    Cell 1 - Looper Consumer [Items ONE] 
    Cell 2 - Looper Consumer [Items ~ Many ~ 4 ]

You would need to have another set of Grid element to display another 5 items like this element structure:

Section - Looper Provider
   Grid 1 - first 5 items 
       Cell 1 - Looper Consumer [Items ONE] 
       Cell 2 - Looper Consumer [Items ~ Many ~ 4 ]

   Grid 2 - remaining 5 items if using the WordPress default 10 items
       Cell 1 - Looper Consumer [Items ONE] 
       Cell 2 - Looper Consumer [Items ~ Many ~ 4 ]

Kindly check out the demo I have created in the secure note below.

Thanks.

#5

Ok i see, thx a lot for explanations @ruenel ! :+1:

#6

One last thing, i have done it with JSON and i would like to the height to be the same for everything, actually the cell 2 with 4 images is always higher then the first image.

Is there a way for the grid 2 (4 images) to be the same height as the cell 1 (big image)

height
height1257×487 65 KB

*Edit : i tried to change the grid column layout for 595px 1fr 1fr (it was 2fr 1fr 1fr) but it it’s not best when the screen shrink

*Edit 2 : ok iput the grid column layout as 2fr 23.5% 23.5% for 1200px and up and 2fr 23% 23% for base breakpoint, i don’t know if it’s the right way to do it but it seems to work :sweat_smile: