我一直在尝试使用 css 网格创建响应式组件，而不是依赖媒体查询，以便它可以利用不同布局中的可用空间。如果空间足够大，应该有两列，第一列是固定宽度（包含图像），第二列是剩余的（带有文本），一个 2x1 的网格。如果不是，那么应该有一列占据所有可用空间，并且网格更改为 1x2，例如
宽 2x1 网格
+---+---------+
| o | text |
+---+---------+
窄 1x2 网格
+---------+
| o |
+---------+
| text |
+---------+
我看着使用repeat(auto-fill, ...)多列维度，但随后它重复了 2 列模式，这是有道理的，但不能解决我的问题。我希望有一种方法可以为不同的auto-fill列定义不同的宽度。否则，我怀疑可能有一个解决方案涉及*-content? 我正在尝试做的可能吗？