CSS 如何为网格中的列分配空间，其中每列宽度由具有固定值的 minmax() 函数定义？

Question

我希望问题标题有意义。如果没有，这是一个具体场景：

假设我们有一个像这样的元素：

main {
  width: 500px;
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(250px, 255px) minmax(100px, 150px);
}

所以这个主要元素是一个宽度为 500px 的网格。每列的宽度是如何确定的？

第一列占用 300px，第二列占用 200px，最后一列占用 0px，这是一种贪婪的方法吗？

但是，如果我们根据最小值分配列宽，那么第一列将占用 200 像素，第二个将占用 250 像素，最后一列将占用 50 像素。

我希望了解在这个特定场景中每列的空间是如何分配的，以便在我最终使用 CSS 网格时能够彻底了解它。

提前致谢！

Answer 1

让我们从宽度等于

550px

的简单情况开始。每个元素在逻辑上都将使用其最小值，并且由于它们无法变小，因此从

0px

到

550px

将具有相同的配置，这将导致溢出。

另一种情况是当宽度等于或大于

705px

时，所有元素都将使用其最大值。

在

550px

和

705px

之间，浏览器将尝试平均划分空间，同时尊重最小最大边界。每个项目都有一个基本尺寸（最小值）和增长限制（最大值）。

让我们举一个

600px

的例子。所有列均以其基本尺寸开始：

200px | 250px | 100px

然后浏览器将同时增加所有大小，一旦列达到其增长限制我们就会停止。

我们先到达重点

205px | 255px | 105px

我们停止第二列，因为它达到了最大值，但我们继续其他列。请注意，我们仍然有

35px

的可用空间，并且该空间可以在第一列和第三列之间划分，而不会达到其最大值以结束：

222.5px | 255px | 122.5px

main {
  width: 600px;
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(250px, 255px) minmax(100px, 150px);
  outline: 1px solid;
  height: 200px;
}

main>* {
  outline: 1px solid red;
}

<main>
  <div></div>
  <div></div>
  <div></div>
</main>

让我们尝试一下

650px

。我们遵循相同的逻辑（我让你一个人做），我们以：

结束

247.5px | 255px | 147.5px

main {
  width: 650px;
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(250px, 255px) minmax(100px, 150px);
  outline: 1px solid;
  height: 200px;
}

main>* {
  outline: 1px solid red;
}

<main>
  <div></div>
  <div></div>
  <div></div>
</main>