I am currently in the process of creating a website with react, and I have reached the point where I need to showcase some products. To achieve this, I am utilizing React's Grid2 due to its flexibility for customization and responsiveness to different window sizes. Each product is represented using React's Card component.
However, I have encountered an issue that I am struggling to resolve.
Please take a look at the following codesandbox: https://codesandbox.io/p/sandbox/lucid-cloud-h2z92f
The number of rows and columns should adjust based on the current screen size and the maximum height/width of each grid item (product card), allowing them to grow or shrink as needed when resizing the window. My understanding is that Grid2 should be able to handle this seamlessly.
For example, please visit and explore how the product "boxes" adapt to different window sizes by shrinking and growing accordingly. This is precisely the behavior I am aiming for.
In the current state of the sandbox, you will notice that the individual grid items do not exhibit the desired responsive behavior when resizing the window. Furthermore, the grid items overflow the backgroundBox boundary. Ideally, each grid item should scale appropriately to fit all 12 items (6 products on 2 rows) within the backgroundBox.
Additionally, it appears that the max width/height of the grid item is fixed instead of serving as an upper limit for adjusting the item's size.
Interestingly, specifying wrap="nowrap" instead of wrap="wrap" causes all 12 products to align in a single row, but they exhibit the responsive shrink/grow behavior that I desire when resizing the window. In this case, the max width/height limits are correctly observed.
It also seems that the specified grid item sizes (xs, sm, md, lg) are not having any effect.