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:
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