在 repeat() 函数中使用自动填充值在 Firefox 中不起作用？

Question

我正在尝试学习 css-网格布局。我已经为 Chrome、FireFox 和 FireFox Developer 打开了网格标志。我还每晚下载了 FireFox（截至今天 52.0a1（2016-11-07）（64 位））。我在 Mac.

我的计划是，我想使用 auto-fill 功能来确保偶数列。所以我这样做了：

.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, 2.5vw 2.5vw);
}

在 Chrome 中有效，但在所有 FF 中，我在调试器中看到 invalid property value 错误。

我在看 Rachel Andrew 的 this grid example，在第三个例子中，她展示了使用固定数量的重复模式：

.wrapper {
  display: grid;
  grid-template-columns: repeat(11, [col] 4fr [gutter] 3.5fr ) [col] 4fr [gutter];
  grid-template-rows: auto repeat(4, [row] auto [gutter] 15px);
}

我试过将重复计数更改为数字，它适用于我所有的浏览器。但是 auto-fill 似乎只适用于 Chrome。我知道该标准尚未发布，但这是应该的吗？

是否有其他技术可以确保偶数列适合 space？

Answer 1

auto-fill 值在 Chrome 和 Firefox 中都有效。

问题似乎出在您的代码中：

grid-template-columns: repeat(auto-fill, 2.5vw 2.5vw);

此代码不符合具有 auto-fill 的 repeat() 函数所需的语法：

7.2.2.1. Syntax of repeat()

The precise syntax of the repeat() notation has several forms:

<track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )

<auto-repeat>  = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<fixed-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

根据 <auto-repeat> 的语法定义，参数中只能有 一个固定大小的 值。你有两个。

所以问题不是第一个参数 (auto-fill)。是第二个。

删除重复的 2.5vw 后，Firefox 接受该规则为有效。（Chrome 显然从一开始就忽略了重复项。）

grid-container {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, 2.5vw 2.5vw); */ /* INVALID */
  /* grid-template-columns: repeat(auto-fill, 2.5vw); */       /* VALID */
  grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr)); /* VALID */
  grid-gap: 5px;
}

grid-item {
  border: 1px solid lightgray;
  background-color: lightgreen;
}

<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
  <grid-item>4</grid-item>
  <grid-item>5</grid-item>
  <grid-item>6</grid-item>
  <grid-item>7</grid-item>
</grid-container>

在 repeat() 函数中使用自动填充值在 Firefox 中不起作用？

Using auto-fill value in repeat() function doesn't work in Firefox?

css

css-grid

jsFiddle