在 CSS 网格中传递 `1fr` 时，`minmax` 如何创建多列？

Question

假设我有以下代码。据我了解，此网格中的列永远不会小于 150 像素宽......并且永远不会超过容器宽度的“1 分之一”。

那么，网格如何决定创建更多列？按照这个逻辑，你不会总是得到一个网格，其中一列占据了容器宽度的 100% 吗？

main {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.item {
    background: #07c;
    height: 150px;
}

<main>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</main>

Answer 1

With this logic, wouldn't you always end up with a grid containing one column that takes up 100% of width of the container?

不会，因为当最大约束以fr表示时，网格不会特别尝试这样做。相反，网格将尝试创建尽可能多的满足网格容器宽度允许的 150 像素最小约束的列。例如——暂时搁置指定的间距宽度——如果网格容器的宽度为 300 像素，将创建两个 150 像素的列。如果它达到 450 像素宽，则会添加第三列。

1fr 表示任何剩余的 space（当网格容器的宽度介于 300 和 450 像素之间时，不包括）在列之间平均分配，after 列已布置。

这都在section 7.2.2.2 of the spec中说明了。文字相当冗长，但它描述了一个与您所拥有的功能相同的示例：

For example, the following code will create as many 25-character columns as will fit into the window width. If there is any remaining space, it will be distributed among the 25-character columns.
body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr));
}

在 CSS 网格中传递 `1fr` 时，`minmax` 如何创建多列？

How does `minmax` create more than one column when passed `1fr` in CSS Grid?

html

css

css-grid