Responsive Card Grid with Breakpoints

Hi everyone,

I currently work on a dashboard (big-screen) with a list of cards. The default grid is three columns. When the screensize is transformed smaller, the grid should change to a two column grid. When this happens, the cards should expand to the full width.
For a better understanding please have a look at the wireframes:


I placed the cards in a container (yellow), set the Layout to „horizontal“ and clicked on „wrap components onto a new row“. The width-settings (advanced) for the cards are:
Bildschirmfoto 2022-04-26 um 11.19.59

But with these settings and when the cards reach a minimum width of 300px, the last card jumps down and a ugly space appears (red: should not happen):

Is it somehow possible to set a formula within the cards „width“-field, which is directly connected to the „yellow“ container:
IF yellow container has a mobile width → card width 100%
IF yellow container has a tablet width → card width 50%
IF yellow container has a desktop width → card width 33%

Thanks in advance

Hi!

There was this discussion about using percentage widths recently: container inconsistency in mobile app | Voters | AppGyver

In general for breakpoints, you could use system variables for screenWidth etc. if you’d prefer that?