css - 可以写“grid-template-columns: 1fr;”吗？如果我在小窗口尺寸上只有一列？

Question

对于500px宽度下的显示尺寸，我希望我的网格只有一列。写grid-template-columns: 1fr;这个可以吗？或者会是另一种更好的选择吗？也许只是grid-template-columns: 1;？

谢谢。

例子：

#grid {
  grid-column-gap: 10px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

@media screen and (max-width: 500px) {
  #grid {
    grid-template-columns: 1fr;
  }
}

标签： cssmedia-queries