使用 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 个项目。只要它可以将它均匀地分布在每一行上，它就应该这样做。

我做了一个几乎可以做到的 sn-p。问题是当屏幕真的很小时，第一个显示 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>