这将是最普遍的解决方案。 使用CSSgrid对可数列和行，根据子元素的和。

JS解释:

1. grid.children.length-计算griddiv的子级。
2. Math.sqrt(Grid.children.Length)-返回子级长度的平方根。
3. math.ceil（math.sqrt（grid.children.length））-将数字向上舍入到下一个最大的整数。 所以我们得到了我们的列和行号。
4. --cols-将CSS变量设置为网格元素。

这个JavaScript可以使用任意数量的grid块。

null

for (const grid of document.querySelectorAll('.grid')) {
  grid.style.setProperty('--cols', Math.ceil(Math.sqrt(grid.children.length)));
}

.grid {
  --cols: 1;
  width: 100px;
  height: 100px;
  display: inline-grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--cols), 1fr);
  column-gap: 2px;
  row-gap: 2px;
  background: #eee;
  vertical-align: top;
  margin: 0 10px 10px 0;
}

.grid>div {
  background: #333;
}

<div class="grid">
  <div></div>
</div>
<div class="grid">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid">
  <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>