CSS（网格），自动调整未知数量的项目、行和列的大小，100% 高度和宽度

Question

我正在尝试渲染一个包含未知数量项目（生成的javascript）的动态（css）网格。

我需要的是让所有项目（明显调整大小）的宽度为 100%，高度为 100%。

例子：

• 1 项目： 大方块
• 2 项：2 个大正方形（2 个水平柱）
• 3 项：屏幕分为 4 个方格，1、2、3 个 div，4 个（最新的）为空
• 4 项目： 4 个正方形的屏幕
• 等等...
• 1920 个项目（在 1920x1080 显示屏上）：在相同数量的列和行中，每个项目的大小都调整得非常小（考虑到之间的间隙，可能只有一个像素或更小）（内部没有文本）（但这只是一个极端的例子，仅用于意义！）

我独自完成的事情：https ://jsfiddle.net/fredhors/s4k3z9t2/8/

CSS：

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, 10vmax);
  grid-gap: 0.5rem;
  height: 100vh;
}

.grid-item {
  background: red;
}

Answer 1

错误在于grid-template-columns: repeat();：我使用了minmax9% 的列宽，以允许所有十列出现在整个页面上，并将1fr剩余空间分配给装订线。

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9%, 1fr));
  grid-gap: 0.5rem;
  height: 100vh;
}

.grid-item {
  background: red;
}

<div class="grid-wrapper">
  <div class="grid-item">Content D</div>
  <div class="grid-item">Content E</div>
  <div class="grid-item">Content J</div>
  <div class="grid-item">Content K</div>
  <div class="grid-item">Content D</div>
  <div class="grid-item">Content E</div>
  <div class="grid-item">Content J</div>
  <div class="grid-item">Content K</div>
  <div class="grid-item">Content L</div>
  <div class="grid-item">Content D</div>
  <div class="grid-item">Content E</div>
  <div class="grid-item">Content J</div>
  <div class="grid-item">Content K</div>
  <div class="grid-item">Content L</div>
</div>

无论大小，它都可以！;)