How to Implement a Repeater with Grid Layout for Complex Styles in Wix?

Question:
[Clearly ask your question.]
I’m working on a Wix website and want to create a complex layout with differently sized Repeater items. The specific layout I’m aiming for looks like this:

I want items 1 and 5 to span the full width, while the other items should be smaller in size. I understand that this can be achieved using a Grid layout, but I’m not sure how to combine it with a Repeater in Wix.

Is it possible to use a Repeater with a Grid layout to achieve this effect? If so, could you provide detailed steps and example code?
Product:
[Which editor or feature is your question most relevant to? e.g. Wix Editor, Wix Studio Editor, Editor X.]
Studio Editor

You can try A/B design feature of repeaters for this, or you can try to place a container inside the repeater and design the grid of that container based on what you need.

If A/B design feature works for you it’s ok.


If not you can try the second thing I said. Place a container into repeater and make it 3 column grid with single row.

And then with coding you can render three items/data in a single repeater container and next item/data again in another repeater container. Like this:

[0, 1, 2, 3, 4]

0 this is the first repeater item and you’ll only render single data in this item.

Keep the repeater column gap 0px and use margins instead for adding gaps between items. Also design the grid using correct type of values within the container that’s inside the repeater item minmax(0px, 1fr) might work correctly in this way if you only render things in the first column other two columns would be 0px in total.

1, 2, 3 would be in the next item of repeater and you would render each of them inside the each column of the container that’s inside the repeater item.

4, again is the next data set you’ll render in the third repeater item.


!! You should also consider cases where you may have different item count for the current row in the repeater.

For example if you have a data like this:

[0, 1, 2, 3, 4, 5, 6]

In the last row that will be rendered you won’t have 3 items instead you’ll have 2 items so you should only render them.

or

[0, 1, 2, 3, 4, 5]

In this case you’ll only have 1 data for the last row instead of 3 again you should consider these cases and render your repeater items based on that.


Repeater items will use the %100 of the width so technically there will be single repeater item per row (you can also set this in repeater settings) but you will render 1 or 3 data in each repeater item and based on what you render you’ll either collapse or delete the other elements with Velo.

Example code that might help you to understand the logic:

// custom index for getting data sets
let customRepeaterIndex = 0;
// all repeater items as an array
const repeaterData = $w("Repeater").data;

$w("Repeater").onItemReady(($item, itemData, index) => {
  // This boolean value will tell you if you need to render 3 or 1 data in that current repeater item. First item will be single render and next is three item render and it'll go like that.
  const isRenderOne = index % 2;

  if (isRenderOne) {
    // Render only one item within the grid container and update index as +1
    customRepeaterIndex++;
  } else {
    // You can get the current and next two items like that as an array (you can also use an object)
    const dataSet = [repeaterData[customRepeaterIndex], repeaterData[customRepeaterIndex + 1], repeaterData[customRepeaterIndex + 2]];

    for (const [index, value] of dataSet.entries()) {
        // You'll render each data one by one here.
        // What I suggest is use state-manager tools to manage the logic here or create some re-usable functions to call them to handle each column render
    }

    // Render three items within the grid container and update index as +3
    customRepeaterIndex = customRepeaterIndex + 3;
  }
});

If you are not able to code I don’t know any other way if you can do it :pensive:

Kolay gelsin. :upside_down_face:

1 Like

This is the most perfect reply

1 Like

This great tutorial might help:

1 Like