CSS网格布局流体单元内容的大小

Question

我是CSS网格的新手，并且已经制作了动态网格布局，可以通过用户输入简单地选择数据。布局可以按预期工作，但我在实现智能手机设备的响应能力时遇到问题。

我得到的是以下内容：

（当前平板电脑视图）

（智能手机当前视图）

我想要的结果是仅更改智能手机设备的网格列布局，如下所示：

（需要查看智能手机）

所以我可能需要的是一种一致的方法来改变这一点：

.container--controls-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

对此：

.container--controls-buttons {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
}

用于任何类型的智能手机设备。由于我无法确定将使用哪种智能手机，因此根据设备宽度进行媒体查询并不是我真正的选择。 ：/

您可以在以下代码笔上查看我的完整代码：https://codepen.io/manuelhrast/pen/RwbOwpX?editors=1100

在此先感谢您提供任何帮助！ ：）

Answer 1

更新此媒体查询将有所帮助。几乎所有智能手机都可以覆盖。

string st = "0,090,000,170,16-0,030,19 0,330,19", aux = "";
int offset = 2;
for (int npos = 0; npos < st.Length; ++npos)
{
    aux += st[npos];
    if (st[npos] == ',')
    {
        for (int mpos = 1; mpos <= offset; ++mpos)
            aux += st[npos + mpos];
        aux += ' ';
        npos += offset;
    }
}
st = aux;