Grid layout for shopping items

I’d like to build a web-app which showcases products in a gallery view. But I couldn’t find the component which works like a grid in HTML.

  1. Is there any easy way to implement a Grid layout in AppGyver?

And I think only some components have padding parameters, the others have margin and position only.

  1. Is it not allowed to adjust padding for every component?

Hi @Tae_Kim,

I guess that a grid can be easy by using a scrollable container and placing rows and cell repeated by the population data (Data variable, formula or parameters)

In this example I have a grid with rows and cells using the “Repeat With” and a formula of data objects. Now I can place any component like a paragraph or a list item inside to represent the grid Item.

Let me know if that works for you.

Best regards,

Well… that’s handy to create a grid, but it can’t adjust its width (I mean # of cells per row) responsively.

Hmm I might be able to do it by re-calculating the indice of the array, which have all elements to be displayed in the grid, whenever the screen width is adjusted. But the solution is quite complex.

Any plan to provide a Grid View Component in the future as the one in Webflow?

And can I adjust padding of view components (I’m wondering this because only some components have padding control UI but others don’t)?

We do have plans to bring in an intuitive Grid View at some point, but for now you do need some formula magic to handle responsiveness.

The available style props have been selected for clarity, feedback is appreciated if you have suggestions – otherwise you can always wrap your components in a container (and potentially turn them into a composite component).

Any update on this? This would be very useful for the type of projects I would like to create. Thanks!

Myself and a bunch of other people would like to see a proper Grid in AG.
Its a BIG missing item.
Life exists beyond the tiny/narrow phone.