如何使用具有最小尺寸的项目显示相同数量的项目

Question

我想知道是否有一种方法可以始终使用网格模板显示每个行的相同数量的项目。网格似乎是最明显的选择，因为我想在水平和垂直方向上放置物品。

我已经习惯了重复（自动填充，...）这样，

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
}

但这只会推动下一行所需的最小元素，以使第一行的元素在第一行中具有最小尺寸10em。

我想要的是，考虑到6个元素的列表，如果该行不能包含其最小尺寸的整个6个元素，则将2行构成3个元素。同样，如果没有足够的空间，请用2个元素等3行，

这可以用媒体试价完成（因为我知道总会有6个元素）

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(5em, 1fr));
  gap: 3px;
}

@media screen and (min-width: 20em) {
  .grid {
    grid-template-columns: repeat(3, minmax(5em, 1fr));
  }
}

@media screen and (min-width: 40em) {
  .grid {
    grid-template-columns: repeat(6, minmax(5em, 1fr));
  }
}

.grid > div {
  border: 1px solid black;
  height: 2em;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

但这看起来不是很干净，我想知道该用例中是否有一个内置解决方案（或者是否在网格外有解决方案）。