Grid

Using the CSS Grid feature

Similar to the List feature, you can add a Grid feature to repeat anything in a repeating, wrapping pattern. This is great for displaying things like product cards in an online store.

Add the Grid to any frame/container that has children items you want to repeat. Quest will use the first child in the container as the item to repeat so if you have different children in your design, only the first will be honored.

On this feature, you specify the data source that will be used to repeat the frame/container. You also specify a variable for each looped element. You can use this variable in the bindings of the frame or its children or pass the variable as nested prop values to any nested component in the containing frame.

From the Grid feature, you can set the space between items vertically and horizontally. You can also set minimum width. Max width is always set to "1 fr" which you can learn more here.

While setting these values won't show how it looks in the Editor mode, you can set these values and then choose how many grid items you want to repeat. In the example image above, you can see we wanted to see 12 items in the grid and it will display as such in the Preview mode.

Check out the video below to see it better in action.