CSS 网格：重复+自动调整+最小最大：如何平衡行项目数以填充空白？

Question

我正在显示动态框网格。

我正在使用

grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));

自动将它们生成为网格的列。

它工作得很好，但是，正如您在示例中看到的，最后一行只有两项。 有什么方法可以告诉浏览器尝试平衡一行中的项目数而无需明确指定列数（以保持响应能力）？

在上面的示例中，项目数完全可以除以 4，因此网格有 4 列而不是 5 列是合理的：

https://codepen.io/poveu/pen/mdoxZjB

Answer 1

我刚刚删除了

display:grid

并制作了

.grid-wrapper {
  flex-flow: wrap;
  display: flex;
  gap: 1.5rem;
  justify-content: center; 
  align-content: start; 
  width: 500px;
}

.grid-item {
  background: gray;
  height: 80px;
  width: 80px;
}

根据你的例子

结果