背景
我试图构建一个页面，其中main节在页眉和页脚之间包含一个动态网格。当用户使用该页面时，书形的.grid-item div将追加到.grid。最初，当.grid为空时，我希望<main>能够扩展以填充页面空间，这样页脚就不会浮到页面的一半。我希望页面垂直增长以便滚动。

书本形状

书的形状，我的意思是列应该是每个网格项目高度的2/3。

问题

问题是，只有网格的列在项目大小相同的情况下才能正常工作。在行方向上，只有第一行正常工作，后面的行只是内容的高度。因此，它们不再是书的形状。
已尝试###个解决方案
我在<main>中添加了flex: 1，这样它就可以根据需要增长，我还使用了grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));，这样它就可以用同样大小的行自动填充网格。
接下来，我尝试用静态大小的列和行自动填充网格：

grid-template-columns: repeat(auto-fill, 200px);
grid-template-rows: repeat(auto-fill, 300px);

在此之后，我对repeat()函数和auto-fill做了一些阅读，看看我的误解在哪里。我还搜索了类似问题的堆栈溢出，并尝试了一些提到的解决方案，如将我的flex-grow和flex-basis更改为<main>，但我无法解决这个问题。

最接近的解决方案

我发现，如果显式更改行而不是使用自动填充，那么行将按预期工作。

grid-template-rows: repeat(12, minmax(250px, 1fr));

然而，这需要我在追加子对象时使用javascript来更改.grid的样式。这个解决方案不起作用，因为如果页面宽度发生变化，列数会自动增加，因此在更改样式之前使用javascript计算所需的行会增加很多额外的工作。因此，我正在寻找一个理想的CSS唯一的解决方案。
第一次
我的问题是如何让网格在保持网格孩子的书形的同时，超越屏幕的限制生长？