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

我试图呈现一个动态（css）网格，其中包含未知数量的项（javascript生成）

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

示例：

• 1项：大广场
• 2项：2个大正方形（2个水平柱）
• 3项：屏幕分为4个正方形，1、2、3个分区，4个（最新的一个）为空
• 4项：屏幕分为4个正方形
• 等等
• 1920个项目（在1920x1080显示器上）：在相同数量的列和行中，每个项目的大小都非常小（考虑到它们之间的间隙，可能只有一个像素或更少）（内部没有文本）（但这只是一个极端的例子，只是为了表达意思！）

我一个人做的事：

CSS：

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

.grid-item {
  background: red;
}

---

错误出现在

网格模板列中：repeat（）：我使用了9%的
minmax
列宽，以允许所有十列显示在页面上，并使用
1fr
将剩余空间分配给排水沟


.grid包装器{
显示：网格；
网格模板列：重复（自动拟合，最小值（9%，1fr））；
网格间距：0.5雷姆；
高度：100vh；
}
.表格项目{
背景：红色；
}

内容D
内容E
内容J
内容K
内容D
内容E
内容J
内容K
内容L
内容D
内容E
内容J
内容K
内容L
错误出现在
网格模板列中：repeat（）：我使用了9%的
minmax
列宽，以允许所有十列显示在页面上，并使用
1fr
将剩余空间分配给排水沟


.grid包装器{
显示：网格；
网格模板列：重复（自动拟合，最小值（9%，1fr））；
网格间距：0.5雷姆；
高度：100vh；
}
.表格项目{
背景：红色；
}

内容D
内容E
内容J
内容K
内容D
内容E
内容J
内容K
内容L
内容D
内容E
内容J
内容K
内容L
这里有一个很好的分层方法：在这里，您可以控制行/列的数量，这样就可以轻松地使用JS设置行/列，而不使用javascript？仅CSS纯？我不这么认为…flexbox可以实现一维，但二维会很棘手。你的东西怎么了？它的哪个部分不工作？@elbrant它不会调整项目大小。列数是固定的（10vmax）。这里有一个很好的分层方法：在哪里可以控制行/列的数量，这样就可以轻松地用JS设置行/列，而不使用javascript？仅CSS纯？我不这么认为…flexbox可以实现一维，但二维会很棘手。你的东西怎么了？它的哪个部分不工作？@elbrant它不会调整项目大小。列数是固定的（10vmax）。它与我的列数没有真正的变化：
minmax（9%，1fr）
这里没有问题。我仍然有固定数量的这样的列。如果你有10个或更多的项目，是的。如果有4个项目，则会得到4列。这不是你想要的吗？不，很不幸。我需要的是每次都有不同数量的物品。你能更好地解释一下吗？CSS（如上）将工作，无论你有多少项目-所以，非常灵活。是否希望页面上最多有10列？或者，无论你给它多少个项目，你都希望它刚好合适，让系统决定页面上有多少个项目？请记住，我是在帮助你，而你是在要求一些不可能的事情。您说您希望“每个项目的大小都非常小（可能只有一个像素或更少）”，但无法为您提供小于一个像素的项目。您还说您希望项目为100%，但标题建议您希望CSS根据页面上的项目数量自动调整项目大小。我不确定您想要什么。请澄清您的问题。它与我的问题没有真正的改变：
minmax（9%，1fr）
这不是问题所在。我仍然有固定数量的列。如果你有10个或更多的项，是的。如果你有4个项，你会得到4个列。这不是你想要的吗？不，很遗憾。我每次需要的是可变数量的项。你能更好地解释吗？CSS（如上）无论你有多少个项目，它都能工作-所以，非常灵活。你想在页面上最多10列吗？或者你想让它刚好适合，不管你给它多少个项目，让系统决定页面上有多少个项目？请记住，我正试图帮助你，而你要求的是一些不可能的事情。你可以y您希望“每个项目的大小都非常小（可能只有一个像素或更少）”，但无法为您提供小于一个像素的项目。您还说希望项目为100%，但标题建议您希望CSS根据页面上的项目数量自动调整项目大小。我不确定您想要什么。请澄清您的问题。