具有最大包装高度的 CSS 正方形网格答案

【问题标题】：CSS grid of squares with maximum height of wrapper具有最大包装高度的 CSS 正方形网格
【发布时间】：2020-10-05 10:06:17
【问题描述】：

我正在尝试使用方形框制作 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 中缺少的东西，但我不知道是什么。如果有人能把我推向正确的方向，那将不胜感激！

【问题讨论】：

这不计算。您需要设置网格父级的宽度以匹配其高度，否则您的框不能是正方形。

标签： html css css-grid

【解决方案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>

【讨论】：

【解决方案2】：

在 CSS 中更改以下选择器：

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

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

【讨论】：