为什么 CSS 网格的自动调整列在移动视图中不折叠？

Question

我正在尝试让 CSS 网格具有灵活的列数，具体取决于显示它的视口的大小，它的范围应该从 1 列到最多 4 列。

如果我在桌面浏览器中预览此代码并将 window 的大小调整为更窄的边界，列会折叠，直到只剩下一列，正如预期的那样。但是，当我在 phone 上导航到此页面时，仍然可以看到三列。此外，如果我使用浏览器的开发控制台（我在 Chrome）并切换到移动视图，然后尝试不同的移动分辨率，列保持固定，既不展开也不折叠。整个视图刚刚缩放。

这是我能想出的重现问题的最准系统代码：（注意：在此代码段中，代码按预期工作，但是如果将其复制到独立的 .html 文件中它停止工作）

<style>
  .center_page {
    width: 70%;
    margin: auto;
  }
  
  .FlexibleGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1em;
  }
  
  .GridItem {
    display: flex;
    border: 1px solid;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
</style>

<div class="center_page">

  <div class="FlexibleGrid">

    <div class="GridItem">
      test
    </div>

    <div class="GridItem">
      test
    </div>

    <div class="GridItem">
      test
    </div>

    <div class="GridItem">
      test
    </div>

    <div class="GridItem">
      test
    </div>


  </div>

</div>

Answer 1

请在<head>标签中添加以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

为什么 CSS 网格的自动调整列在移动视图中不折叠？

Why are CSS Grid's auto-fit columns not collapsing in mobile view?

html

css

css-grid