Divs instead of columns in Collection List

How can I use Divs instead of columns in a collection list? I find the column element EXTREMELY frustrating to use (and a nightmare for responsive). I tried adding a div Inside my collection list either before or after the column flexbox, and it wouldn’t let me place a div there. Any suggestions @Joyce ?

Why not just use the new grid display? You can even assign the columns dynamically.

1 Like

Thanks, I’ll check it out.

do you mean the element called Datagrid?

That’s awesome @Broberto . It will work when I just displaying simple data in a row, but not for something like this where I need to have multiple elements in a div. How would you build this one? With table element?

Hey, I made a video for one of my mentees after our 1:1 session. This might help you out :smiley: Don’t mind me having a cold at like 1 am. If you have more than one thing in the column, e.g text and a headline, you simply wrap the two into a div and it becomes “one” element

Hey Broberto, thanks for making this video and sharing it. Can you take it one step further and show how you’d bind a dataset so that each row is displaying one object, and each column is displaying one value from that row’s object? I tried to use the new grid feature to build a custom datagrid, but couldn’t figure out how to properly display it as one object per row.

You can solve that with one more level of div.
If you bind your list on the top, then if there are three items, it’ll create three “rows”, with three columns in each row.