为什么（以及如何）使用具有范围的行高来设置 CSS 网格的样式 [重复]答案

【问题标题】：Why (and how to) style CSS grid with row height with a range [duplicate]为什么（以及如何）使用具有范围的行高来设置 CSS 网格的样式 [重复]
【发布时间】：2021-05-26 11:04:50
【问题描述】：

我试图理解为什么为grid-template-rows 指定相同的minmax 无法产生与grid-template-columns 似乎产生的相同类型的结果。

这里是 HTML。很简单：

<html>
  <body>
    <div class="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

这是 CSS：

.container > div {
  border: 1px solid red;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 400px));
  grid-template-rows: repeat(3, minmax(200px, 400px));
}

这是 CodePen 上的代码行： https://codepen.io/user1831902/pen/KKNyJQr

您可以看到，当您扩大/缩小浏览器的宽度时，每一列确实扩大到400px 宽度并缩小到200px。但是，每行的高度保持在400px。

为什么会这样？（我的猜测是浏览器将视口下方的高度视为“可用空间”。是这种情况吗？如果是这样，你如何限制它以使其不会，并且指定的minmax 范围实际上得到了尊重。

我尝试用max-height 限制.container，但这没有任何作用。

【问题讨论】：

标签： css css-grid

【解决方案1】：

所以我不能指出为什么这不起作用，但我相信我可以为你解决它。

试试这个：

body { 
  display: flex; // add this
  height: 100vh; // and this to your containing area
}

.container > div {
  border: 1px solid red;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 400px));
  grid-template-rows: repeat(3, minmax(200px, 400px));
}

正如您所建议的，我很确定浏览器会将窗口下方的空间视为可用，但如果您将容器设置为 height: 100vh; 并将其设置为 display: flex;，那么行将在该区域内增长和缩小，并且将遵守您的最小和最大高度设置。

所以你需要给它们一个定义的高度以便在其中操作，但如果它不是一个弹性容器，它将无法工作。

【讨论】：

优秀的解决方案！谢谢！我确实认为我对“可用空间”的原始解释是正确的。我认为浏览器将视口的最大宽度视为可用空间，但默认情况下垂直空间没有真正的限制。将其设置为视口高度的 100% 的 flex 容器会改变这一点。
嗯...您知道吗...只要您简单地为.container 定义height，如：height: 100vh，它就可以工作。不需要弯曲。如果您仍然看到滚动条，那是因为正文与本机浏览器样式相比还有一些边距。
嗯，很奇怪，在我使用的操场上，它的增长超出了容器的高度 - 我不只是看到一个滚动条。但很高兴它有效！
你可以到这个链接，将编辑器向右（或向左）移动并打开 CodePen 控制台来降低视口的高度：codepen.io/user1831902/pen/KKNyJQr