html - CSS 网格布局中的 minmax()

Question

我遇到了与 CSS 网格布局相关的 minmax() 函数的一些问题。

这是我的代码:

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: minmax(150px, 250px) 1fr 1fr;
  grid-gap: 20px;
}

.grid div {
  border: 1px solid rgb(0, 95, 107);
  border-radius: 3px;
  background: rgba(0, 95, 107, 0.8);
  padding: 0.2em;
  color: #FFF;
}

<div class="grid">
  <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>

当我将 minmax() 与我的 CSS 中提到的 fr 单元一起使用时，网格轨道的宽度会获得最大值，并且保持在最大尺寸，即使我缩小视口(viewport)；但是当我将它与 px 一起使用时，如下所示

grid-template-columns: minmax(150px, 250px) 200px 200px;

它按预期工作，我不知道为什么。

测试:Chrome 和 Firefox

Answer 1

您的代码没有任何问题。这似乎是 minmax 与使用 fr 单位的列组合时的标准行为，因为 fr 单位没有最小值(除了其内容的宽度在这里几乎是空的——只有一个数字)。

如果有足够的屏幕空间，minmax 将占据其最大值。

如果您要增加 minmax 中的最大值，然后调整您的浏览器窗口，您会注意到 minmax 正在工作，并且当没有足够的空间时为了使其达到最大宽度，其宽度将减小。