包装器最大高度的CSS正方形网格

Question

我正在尝试制作一个带有方形方框的CSS网格布局。这是有效的，但当我设置包装器的最大高度时，它会保持第一行的正方形，但第二行和后面的行会被裁剪成矩形。我似乎不明白它为什么这么做。

#wrapper {
display: grid;
width: 100%;
max-height: 75vh; /* excluding this line gives all nice squares */
grid-template-columns: repeat(10, auto);
grid-auto-rows: 1fr;
}
#wrapper::before {
content: '';
width: 0;
padding-bottom: 100%;
grid-row: 1 / 1;
grid-column: 1 / 1;
}
#wrapper>* {
background: blue;
border: 1px white solid;
position: relative;
}
#wrapper>*:first-child {
grid-row: 1 / 1;
grid-column: 1 / 1;
}

<div id="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

当我在包装器div上排除max-height时，它会显示所有的sqares，这正是我想要的。然而，我希望它们都显示在屏幕的最大75vh高的部分内。必须指出的是，行和列的数量以及显示的正方形数量是可变的。无论数字是多少，它们都应该显示为屏幕75vh内的正方形。

我想(也希望(这是我在CSS中缺少的东西，但我不知道是什么。如果有人能把我推向正确的方向，我将不胜感激！

Answer 1

您的#wrapper必须具有与高度相同的宽度。在实践中，我不知道如何使用这种方法单独使用CSS来解释比视口短的网格。

#wrapper {
display: grid;
width: 75vh;
max-height: 75vh; /* excluding this line gives all nice squares */
grid-template-columns: repeat(10, auto);
grid-auto-rows: 1fr;
}
#wrapper::before {
content: '';
width: 0;
padding-bottom: 100%;
grid-row: 1 / 1;
grid-column: 1 / 1;
}
#wrapper>* {
background: blue;
border: 1px white solid;
position: relative;
}
#wrapper>*:first-child {
grid-row: 1 / 1;
grid-column: 1 / 1;
}

<div id="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Answer 2

在CSS中更改以下选择器：

#wrapper::before {
content: '';
width: 0;
padding-bottom:  50%;
grid-row: 1 / 1;
grid-column: 1 / 1;
}

试着使用一个不超过包装器75vh的填充值。