CSS 网格将单元格均匀分布在可用行中

Question

我正在尝试制作一个 CSS 网格，将单元格均匀地分布在可用行中，以便最后一行不会大部分为空。单元格的数量是可变的，但单元格的宽度是固定的。容器宽度也是响应式的。 我可以通过以下方式实现具有可变列/行的网格：

grid-template-columns: repeat(auto-fill, Xrem);

但是当创建新行时，其中只有一个元素，其余为空。

请参阅以下示例：https://codepen.io/saurabh0/pen/MYgpZWZ

添加第 8 个元素时，我得到：

这就是我想要的：

Answer 1

尝试使用 CSS 函数 minmax() .

以下解决方案怎么样：

.container {
    /* Your other code */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2rem;
}