CSS网格包装行为

Question

我是网格布局的新手，我正在尝试使用它进行自动包装设计。

我的代码如下：

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-template-rows: 200px 200px 200px 200px;
  grid-gap: 10px;
}

#grid > div {
  background-color: #ccddaa;
  min-width: 310px;
}

<div id="grid">
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
</div>

Codepen示例：https://codepen.io/arielcessario/pen/GvdwLJ

我注意到的事情是，当我调整chrome / Opera窗口的大小时（不是在开发模式下，而不是移动模拟），结果如下：

如您所见，所有内容都按预期堆叠。

但是，当我尝试模拟移动设备，或者在移动浏览器中试用它时，这就是我得到的：

这是移动项目的屏幕截图：

无论宽度如何，它都不会叠加。

备注：

• 当我在移动视图中检查时，任何框的宽度都不会小于379像素，网格的整个宽度永远不会小于768像素。
• 如果我使用固定的max-with作品，但百分比没有。
• 在Firefox模拟器上工作正常，但在Firefox移动浏览器上却没有。
• 正如Michael_B指出的那样，笔在移动设备上运行良好，问题在于真实项目，如果你在chrome上模拟。

我想我错过了一些东西，但我找不到它。提前谢谢。

Answer 1

我不能在手机上复制这个问题。

但是，如果目标是较小屏幕的单个列，请尝试以下操作：

将min-width: 0添加到您的网格项（explanation）。

OR

使用媒体查询，像这样调整容器：

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