如何制作灵活的网格css/react

我是css/react的新手，我正在寻找一种使我的网格动态化的方法。我想要的结果是一个

3*3

网格，每个网格都可以根据其内容动态伸缩。我遵循了一个教程，但输出并不是我所期望的，因为它们都根据

css

中的最大大小进行缩放

这是我目前的情况

.货柜卡{
保证金：自动；
宽度：20%；
填充：10px；
显示器：flex；
证明内容：中心；
}
.货柜物品{
显示：网格；
网格模板列：重复（3300px）；
网格模板行：自动；
高度：500px；
宽度：1000px；
网格间距：10；
网格模板区域：
“a b”
“a b”
“c d d”；
对齐内容：居中对齐；
}

函数Home（）{
返回(
)
}
导出默认主页

看起来是这样的

---

您已明确告知列的宽度为300px，这既不响应也不可扩展。使用

fr

或%units@Paulie_D哦，是的，我明白了，但我该如何让它充满活力呢？请clarify@Paulie_D例如，我希望中间的卡是这个尺寸，因为它的内容有这么长，但对于spotify和microsoft卡，在用户登录之前，卡的长度应该与按钮宽度一样长，然后它的大小将根据其内容进行调整