Im making a website using react, and have come to the place now where i need to display some products. So im using React’s Grid2 for this, which seems like a good approach given its customization possibilities and responsiveness to window sizes. I have used React’s Card to model a product.
However, i have run into a problem, that i cannot seem to figure out how to solve.
Please look at the following codesandbox: https://codesandbox.io/p/sandbox/lucid-cloud-h2z92f
The amount of rows and columns should simply be with respect to the current screen size and of course the max height/width of the grid items (product cards), which specify to which degree they can grow when resizing the window. To my understanding Grid2 should be able to simply handle this.
For example, if you go to https://www.sportsworld.dk/sale/mens/top-picks and resize the window in different ways you can see how the product "boxes" shrink and grow. This is exactly what i want.
From the current state of the sandbox, you can see that the individual grid items do not have this shrink/grow responsiveness when resizing the window, also the grid items fall out of the border of the backgroundBox – the ideal outcome here would be that each grid item would scale to the screen size in order to fit all 12 items (6 products on 2 rows) inside the backgroundBox.
Its funny, when adding the wrap="nowrap" instead of wrap="wrap" of course all 12 products get mashed into one row, but when resizing they actually get that responsive shrink/grow that i want.
Also the specified grid item xs, sm, md, lg seemingly have no effect.
You need to sign in to view this answers
