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

我摘录了ALMOST的片段。问题是，当屏幕很小时，第一个显示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>

使用CSS网格自动平均分配列

1 个答案: