动态网格：当屏幕尺寸增加时添加更多列

Question

我正在尝试创建一个网格，其中各列可动态适应屏幕尺寸。最重要的标准是，我只希望在移动设备或尺寸类似的PC上的浏览器上保留一列，当浏览器窗口的宽度增大时，可以添加更多列。

我一直在使用网格来实现这一点：

.App {
  margin: 10px;
  text-align: center;
  display: grid;
  grid-gap: 10px;
  justify-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(?, ?)); /* Should change */
}

网格中的所有内容都具有相同的宽度，并且看起来像下面的草图： 对于网格的子级的特定宽度，我正在考虑使用minmax函数来决定是否应仅填充整个视口宽度，但是我在这里遇到了麻烦。因为如果我使用类似minmax(25vw, 100vw)之类的东西，那么我将始终具有100vw的宽度，因为没有什么阻止它不能达到全角。

我不是一个CSS专家，没有太多经验，因此，如果我说的话完全愚蠢，请毫不犹豫地指出来！

Answer 1

如果我对您的理解正确，那么media queries应该可以解决您的问题。它们使您可以指定仅适用于某些屏幕尺寸的规则（或其他条件）。

在您的情况下，假设您要在最大宽度为720px的所有设备上放置一列，如果它们较大，则尽可能在网格中容纳更多列（如果我错了，请纠正我！ ）。

然后我们可以将其用于所有小屏幕：

@media (max-width: 720px) {
  .grid {
      grid-template-columns: repeat(auto-fill, 720px);
  }
}

并使用grid-template-columns: repeat(auto-fill, 200px);，其中200px是我们商品的宽度，例如，在所有其他情况下。

请参见以下示例：

body {
  margin: 0;
}

.grid {
  width: 100%;
  margin: 1rem auto;
  display: grid;
  justify-items: center;
  grid-gap: 10px;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, 200px);
}

.item {
  width: 200px;
  height: 200px;
  border: 1px solid #333;
  background-color: #aaa;
}

@media (max-width: 720px) {
  .grid {
      grid-template-columns: repeat(auto-fill, 720px);
  }
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

注意：使用“整页”查看它在较大的width上的运行情况。