How can I pull data in a gallery (grid / column) format left to right top to bottom

Wappler General How To
#1

I have used the table generator to pull my data into a table… Works great… However, how can I pull data in a left to right top to bottom gallery (grid / column) like format much like a Realtor website where you have one property with all of it’s data like price, type, description etc. all pulled under like one item

(with multiple item
and it’s data going left to right top to bottom). I have looked at all of the videos that I could find but I have not seen how or if it can be done.
#2

Hello @Quest
Is it possible to provide an example of what you need to achieve, your explanation is not really providing a clear explanation of what kind of layout are you trying to build.

#3

You have a demo when you download wappler called “Demo Dynamic Real Estate Site” . Each of the 6 property is in a div with the id = card and repeated.

How do I make the page data driven with mysql.
Do you have a tutorial on that?

#4

The Real Estate site uses a JSON file for its data. Using a relational database like MySQL uses the same process, only the source of the data is different. Have a look here for more https://docs.wappler.io/t/server-connect-introduction/2835

#5

@Quest I believe you just answered your question :slight_smile:
Just add cards in your layout and apply the repeat region to them. You can inspect the layout to see the structure and recreate it.

#6

Got it working thanks.

1 Like