3

我面临minmax()与 CSS 网格布局相关的功能的一些问题。

这是我的代码：

* {
  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>

当我使用我的 CSS 中提到minmax()的fr单位时，网格轨道的宽度获得最大值，并且即使我减小视口也保持在最大尺寸；px但是当我如下使用它时

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

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

测试：Chrome 和 Firefox

4

1 回答 1

3

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

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

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

于 2016-12-29T11:23:41.547 回答