CSS网格最小 - 最大的关键字无法在Chrome

Question

铬给出了一个invalid property value，不尊重的CSS：

grid-template-columns: repeat(auto-fill, minmax(auto, 1fr)); 

也当auto替换min-content和max-content失败。

它按预期的方式工作，当auto被固定值例如

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 

这是令人惊讶的，因为这两个repeat和minmax支持关键字。

的HTML是简单

<div class='wrapper> 
    <div>...</div> 
    <div>...</div> 
</div> 

和CSS

.wrapper { 
    display: grid 
    grid-template-columns: repeat(auto-fill, minmax(auto, 1fr)); 
} 

Answer 1

跨浏览器出现的错误（不只是镀铬），因为是违反规范的。

使用auto-fill/auto-fit时，必须有一个确定的最小尺寸或最大尺寸。

所谓“确定”，该规范是指：

，可以在不测量内容被确定的尺寸。

^{https://www.w3.org/TR/css-sizing-3/#definite}

如果同时设置minmax论点基于内容的大小，像这样：

grid-template-columns: repeat(auto-fill, minmax(auto, 1fr)); 

...这是违反规范的，因为没有确定的大小。

使用min-content和max-content由于同样的原因会导致相同的错误。

只要一个值是明确的，并且第一个值不是fr（请参见下文），则该规则是有效的。

7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions

当auto-fill被给定为重复数，如果电网 容器具有在相关轴线的 definite大小或 最大大小，则重复次数是 最大可能的正整数不会导致网格 溢出它的网格容器（将每个曲目视为其最大轨迹 尺寸函数（如果是确定的）或作为其最小轨道尺寸调整 函数，否则将grid-gap）;如果重复的任何数字 会溢出，则重复1次。否则，如果网格容器在相关轴中具有确定的最小尺寸，则重复次数是 满足该最小要求的最小可能正整数。否则，指定的曲目列表 只会重复一次。

---

原来的答案 - 问题之前进行了修订

的问题是，1fr不能minmax()设置为最小值。

从规格：

minmax(min, max)

定义的尺寸范围大于或等于min且小于或 等于max。

如果max < min，然后max被忽略，minmax(min,max)被 视为min。

作为最大值，<flex>值设置曲目的弹性因子; 它是 无效至少为。

注意：该规范的未来的水平可以允许<flex>最小值，和 将更新轨道上浆算法考虑到这一点正确

<flex>

柔性长度或<flex>与fr的尺寸单位，它表示网格容器中可用空间的一小部分。