React Grid2 不尊重行/列定义并且缺少响应能力

Question

我正在使用react制作一个网站，现在已经到了我需要展示一些产品的地方。所以我使用 React 的 Grid2 来实现这一点，考虑到它的定制可能性和对窗口大小的响应能力，这似乎是一个很好的方法。我已经使用 React 的 Card 来建模产品。

但是，我遇到了一个问题，我似乎不知道如何解决。

请查看以下codesandbox：https://codesandbox.io/p/sandbox/lucid-cloud-h2z92f

行和列的数量应该简单地相对于当前的屏幕尺寸，当然还有网格项（产品卡）的最大高度/宽度，它指定在调整窗口大小时它们可以增长的程度。据我了解，Grid2 应该能够简单地处理这个问题。

例如，如果您访问 https://www.sportsworld.dk/sale/mens/top-picks 并以不同方式调整窗口大小，您可以看到产品“盒子”如何缩小和变大。这正是我想要的。

从沙箱的当前状态，您可以看到，在调整窗口大小时，各个网格项没有这种收缩/增长响应能力，而且网格项也超出了背景框的边框 - 这里的理想结果是每个网格项目都会缩放到屏幕尺寸，以便适合背景框内的所有 12 个项目（2 行 6 个产品）。

此外，现在看来网格项目的最大宽度/高度只是设置为项目的固定大小，而不是用于缩小/增长项目的上限。

有趣的是，当添加wrap =“nowrap”而不是wrap =“wrap”时，当然所有12个产品都会被混成一排，但是当调整窗口大小时，它们实际上得到了我想要的响应式收缩/增长，其中最大网格项的宽度/高度实际上用作上限。

还有指定的网格项xs、sm、md、lg貌似没有效果。

Answer 1

目前在 products.map 内的 Grid 元素中，您只需根据屏幕尺寸设置列数，但需要添加缩小逻辑。尝试在网格道具中使用这些自定义样式：

sx={{
    flexGrow:
    flexBasis:
    maxWidth:
    transition: //for the smooth size changes
}}