It looks like your cards have a fixed width, a layout grid shrinks its content to the minimum possible size. When giving a fixed width to elements, this minimum size increases, so it won’t look good on smaller screens.

You could use a flex layout to determine how many cards can fit in a row. This way, the screen size doesn’t matter because the cards will always fill the container based on the screen width.

You can achieve this by following these steps:

1. Use a list view to display the cards.
2. Use List Style ‘No Styling’ to remove all default styling of the list view
3. Add a custom class to the listview, e.g. ‘card-grid’
4. Add the following SCSS to your custom styling:

   .card-grid {
     ul {
       display: flex;
       flex-wrap: wrap;
   
       li {
         width: 100%;
         max-width: 250px;
         padding: 8px;
       }
     }
   }

   The max-width and padding of the ‘li’ can be anything you want, based on your preferences of the width of the card and space between the cards.

Hope this helps!