Question

Chrome提供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时，必须有明确的最小尺寸或最大尺寸。

通过＆＃34;确定＆＃34;，规范意味着：

可以在不测量内容的情况下确定的尺寸。

^{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＆lt; min，然后忽略max并minmax(min,max)   视为min。

作为最大值，<flex>值设置轨道的flex因子; 是的   至少无效。

注意：此规范的未来级别可能允许<flex>最小值，以及   将更新轨道大小调整算法以正确解释

<flex>

灵活长度或<flex>是具有fr单位的维度，表示网格容器中可用空间的一小部分。

minmax失败（无效的属性值）

1 个答案: