如何动态调整卡片数量可变的记忆游戏的 CSS 网格布局，同时保持响应式设计？

Question

我正在构建一个记忆游戏，想要动态调整 CSS 网格布局以适应可变数量的卡片。面临的挑战是确保无论卡片数量多少，卡片尺寸都保持一致，并且布局在不同的屏幕尺寸上保持响应。我不确定如何在不破坏设计的情况下实现这种灵活性。

我尝试使用，

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

使网格响应并动态调整卡片数量。我希望卡片能够调整大小并在不同的屏幕尺寸上保持一致的间距。但是，卡片在较小的屏幕上无法正确调整大小，并且当卡片数量增加时布局会中断。

Answer 1

我看到了您的询问，并想提出一些建议：

1. 尝试使用自动调整而不是自动填充。
2. 为容器设置最大宽度，以防止其在较大屏幕上拉伸得太远。
3. 添加媒体查询以在更改为小屏幕时提供响应能力。

我希望这有帮助。