I’m struggling to get my datagrid to respond as expected.
When I reduce the screen width, the cards seem to stack on top of each other.
Columns width = 100%
Flexbox width = 320px
Card width = 300px
Is there any tutorials on how to make this arrange the cards as the screen is width is modified?
Ideally, I’d like 4 columns for >1280 pixels and reduce this down to 320 for mobile devices.
NB: Number of cards is unlimited. 5 are shown here for illustrative purposes only.
Did you use the columns elements or a simple flexbox?
I originally used the “Grid List” template from “Data Display”. I deleted the cards and added my own.
Here’s the settings for the columns.
The size is shown as 100% but I did have it at 1280px and tried different settings.
The Flexbox is sized as 320px wide
The card is sized as 300px wide with padding.
Hi @Quentin, here’s a short clip of what I’m trying to achieve and what the default grid list does when the card and columns widths are restricted to ~300px.
Here’s how my app currently functions in Bubble.
Here’s what the default grid list does in WeWeb.
The cards overlap each other and then stack into a single column.
Hi @rory 
From looking at your screenshots and how the default grid list is built, I think the issue is the width properties of your flexbox and card elements.
In the default grid list, the width of both these elements are set to auto but in your screenshot, the flexbox width is set to 320px and the card width is set to 300px.
Does that help?
In case video helps, here’s the process I used to try to work through the issue.
Hi Joyce,
I’m having a similar issue.
I want my cards to be sized for eg 320 x 180 similar to the below
Am I doing this width and height adjustment at the Flexbox level or Card level? When I use the grid element straight off weweb, and adjust the settings on either container, the text div keeps getting hidden. Even if I set it at 100% width and 100% height, it seems to be hidden.
Also with the number of items shown per row, if I set max width of 1780px, how can I set the number of item columns per row dynamically so it can fit as many as possible. So if the width is smaller, it will show 3 items per row. If the desktop width is 1780px, show 5 items per row
Thanks for responding @Joyce, I really appreciate it.
I guess what I’m trying to do is increment from 4 columns down to 1 as the screen width reduces.
The Bubble demo only showed it increment from 3 columns, but with wider screens it starts at 4.
You’ve shown that the columns are fixed at 3 but when a mobile device is used, the alignment is set from ‘mosaic’ to ‘rows’ which then gives 1 column.
In my case, if I allow the card width to reduce whilst the screen is reducing, the information on each card won’t be legible.
Not sure I understand your question. Is this the result you’re going for?
If it is, then you can change the column presets on desktop to 4 and on tablet to 3:
Hi @D-EFFCON
Could you record a short video walking us through the changes you made to the Grid list element?
By default, that element is responsive and if you want to increase the number of items shown on desktop, you can increase the number of columns:
