[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

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

@media screen and (max-width: 600px) {
  .container--controls-buttons {
    grid-template-columns: auto;
  }
}