css - 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;
}

标签： csstemplatesgridcss-grid

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>

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