html - 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 窗口大小时(不是在开发模式下，不是移动仿真)，结果如下:

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

但是当我尝试模拟移动设备或在移动浏览器中尝试时，这就是我得到的结果:

这是元素在移动端的截图:

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

注意事项:

• 当我在移动 View 中检查时，任何框的宽度都不会小于 379 像素，网格的全宽不会小于 768 像素。
• 如果我使用 fixed max-with 会起作用，但 percentage 不会。
• 在 Firefox 模拟器上运行良好，但在 Firefox 移动浏览器上运行不正常。
• 正如 Michael_B 指出的那样，笔在移动设备上运行良好，问题出在真实元素上，如果您在 chrome 上进行模拟。

我想我遗漏了一些东西，但我找不到它。提前致谢。

Answer 1

我无法在移动设备上重现该问题。

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

将 min-width: 0 添加到您的网格元素 ( explanation )。

或

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

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