CSS 用许多相同的孩子完全填充容器

Question

有没有办法用任意数量的正方形、相同大小的孩子（少至五个，多至 50 个）填充给定容器，以便孩子们：

1. 填充容器，尽可能少地留出垂直和水平空间；和
2. 不要溢出容器？

例如，想象一盒 17 个圆形头像，每个头像都被放大，直到任何进一步的尺寸增加都会导致它们包裹并流过容器底部。

我知道我可以使用 JS 来计算子项的最佳比例来填充容器，但我觉得要么flex或者grid内置了这个功能。

这与我得到的差不多：

.container {
    border: 1px solid tomato;
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
    height: 100vh;
    justify-content: center;
    width: 100vw;
}

.container > div {
    background-color: coral;
    flex: 0 0 12%;
    margin: .5em;
}

.container .div::before {
    content: '';
    display: block;
    padding-top: 100%;
}

    <div class="container">
        <!-- 32 children -->
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
        <div></div><div></div>
    </div>

如果这是重复的，请道歉。在提问之前，我已经尽我最大的努力去寻求答案。

---

[编辑：添加细节]

这是所需的结果，显示了一个固定大小的盒子和大小直到容器完全装满的项目。如果盒子的大小与此不同，或者里面有不同数量的物品，这些物品会缩放，直到它们都适合里面而不会溢出。最后两个孤儿的对齐并不重要，但它们必须与其余项目的大小相同。

Answer 1

这（某种程度上）可以通过 flex 来实现。您可以确保space-evenly属性打开时每列之间的间隙均匀justify-content。但是，如果没有 JavaScript，就不可能使行与列之间具有相同的间隙。相反，您必须通过手动定义行间隙row-gap。

.flex-container {
  width: 300px;
  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  row-gap: 8px; /* Issue on this line */
  
  background-color: blue;
}

.flex-item {
  padding: 30px;
  background-color: red;
}

<div class="flex-container wrap">
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
</div>

作为旁注，这在网格中绝对不可能做到，因为您不能在模板列中具有隐式大小定义。即以下内容将不起作用：

grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr))