javascript - 在固定大小的大正方形中创建动态相等大小的小正方形网格

Question

我怎样才能在一个固定的大正方形内创建动态等大小的正方形？大小应根据正方形的数量。

标签： javascripthtmlcssuser-interfacecss-grid

Answer 1

这将是最通用的解决方案。根据子元素的总和，使用 CSS gridwhit 可数列和行。

JS解释：

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

此 JavaScript 适用于任意数量的grid块。

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>