1

我正在尝试学习 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);
}

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

我正在查看Rachel Andrew 的这个网格示例，在第三个示例中，她展示了使用固定数量的重复模式：

.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。我知道标准还没有发布，但它应该是这样的吗？

是否有其他技术可以确保将偶数列放入空间中？

4

1 回答 1

3

该auto-fill值适用于 Chrome 和 Firefox。

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

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

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

7.2.2.1。的语法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>

jsFiddle

于 2017-04-16T23:30:51.673 回答