如何在不使用媒体查询的情况下重新排列网格项目

Question

我想知道，是否有可能在不使用媒体查询的情况下在CSS网格中重新排列项目。

我需要重新排列我的模态窗口组件中的一些项目，因此我不能使用媒体查询。

在下面的图片中，我得到了我想要的结果的图形化场景。例如，这些数字是一些复选框项。

​

​

谢谢。

Answer 1

如果您在grid-template-columns中只设置了一列，我认为它会给出您想要的输出

.grid-container{
  ...
  grid-template-columns: auto; // this means 1 column
  grid-template-columns: auto auto // this means 2 column so on an so forth
}