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

有了这个逻辑，你不会总是得到一个包含一列占据容器宽度100％的网格吗？

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

1fr意味着任何剩余空间（当网格容器的宽度在300到450像素之间时不包括在内）在列列列之后中平均分配。< / p>

section 7.2.2.2 of the spec中陈述了这一点。该文本相当冗长，但它描述了一个与您所拥有的功能完全相同的示例：

例如，以下代码将创建适合窗口宽度的25个字符的列。如果有剩余空间，它将分布在25个字符的列中。
body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr));
}

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

1 个答案: