背景
我试图建立一个main节之间的页眉和页脚包含一个动态网格的页面.当用户使用该页面时，书形.grid-item div被附加到.grid.最初，当.grid为空时，我希望<main>扩展以填充页面空间，这样页脚就不会漂浮在页面的一半上.当网格超出这个空间的范围时，我希望页面垂直增长，以便滚动.
书本形状
所谓书本形状，我的意思是列应该是每个网格项目高度的2/3大小.
问题
问题是，只有网格的列与大小相同的项的行为符合预期.在行方向上，只有第一行按预期工作，后面的行只是内容的高度.因此，它们不再是书本形状的.
try 的解决方案
我在<main>的基础上增加了flex: 1，这样它就可以根据需要增长.我还使用了grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));，这样它就可以用相同大小的行自动填充网格.
接下来，我try 使用静态大小的列和行自动填充网格:
grid-template-columns: repeat(auto-fill, 200px);
grid-template-rows: repeat(auto-fill, 300px);
在这之后，我读了一些关于repeat()和auto-fill的函数，看看我的误解在哪里.我还在堆栈溢出中搜索了类似的问题，并try 了一些提到的解决方案，如将我的flex-grow和flex-basis更改为<main>，但我无法解决该问题.
最接近解
我发现，如果我显式地更改行，而不是使用自动填充，那么行就会按预期工作.
grid-template-rows: repeat(12, minmax(250px, 1fr));
然而，这需要我在附加子元素时使用javascrip来更改.grid的样式.这种解决方案不起作用，因为如果页面宽度发生变化，导致列数减少，行数将自动增加，因此在更改样式之前使用javascrip计算所需的行数将增加大量额外工作.出于这个原因，我理想地寻找一个只有css的解决方案.
body {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 0;
}
header, footer {
height: 40px;
}
main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
background-color: grey;
width: 100%;
}
.grid {
display: grid;
width: 60vw;
margin: 5px var(--margin-size) 5px var(--margin-size);
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
gap: 10px;
}
.grid-item {
background-color: red;
}<body>
<header>
Header
</header>
<main>
<div class="grid">
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
</div>
</main>
<footer>
Footer
</footer>
<body>我的问题是，我如何才能让网格超出屏幕的限制，同时保持网格子元素的书本形状？