Question

我正在尝试学习css-grid布局。我打开了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。我知道标准还没有被发布，但它应该是这样的吗？

是否有其他一些技术可以确保适合空间的偶数列？

Answer 1

auto-fill值适用于Chrome和Firefox。

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

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

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

7.2.2.1. Syntax of repeat()

repeat()表示法的精确语法有多种形式：

<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中不起作用？

1 个答案:

jsFiddle