css - 使用 css 网格自动均匀分布列

Question

如何在列中均匀分布 x 个元素。例如，如果我有这段代码

div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 0.5rem;
}

span {
  background: red;
  height: 50px;
}

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

我希望它均匀贴合。所以它不应该在第一行显示 3 个元素，在第二行显示 1 个元素。相反，它应该在第一个上显示 2 个元素，在第二个上显示 2 个元素。只要它可以将它均匀地分布在每一行上，它就应该这样做。

我做了一个几乎成功的片段。问题是当屏幕非常小时，第一个显示 3，第二个显示 1。请注意，现在我只有 4 个元素，但它应该可以动态处理任意数量的元素。

Answer 1

我认为一个好的和简单的选择就是针对较小的屏幕指定列数； auto-fit 规则不会让您指定最小或最大列数，只会在有可用空间时调整它们。

div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 0.5rem;
}

span {
  background: red;
  height: 50px;
}

@media (max-width: 500px) {
  div {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }
}

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>