CSS Grid : grid-column with span, calc() 和 CSS 变量在 WebKit 浏览器中不起作用

Question

我正在使用一个简单的网格，其中列的数量可以通过 CSS 变量进行配置/覆盖。

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 1), 1fr);
}

// Mixin for tablet media query
@include tablet {
  .grid {
    --grid-columns: 2;
  }
}

// Mixin for tablet media query
@include desktop {
  .grid {
    --grid-columns: 4;
  }
}

上面是一个简化的例子。
我还有一个可以在“单元格”上使用的类，以注意它是全宽还是两个单元格宽(跨度半)。

@include desktop {
  .span {
    &-full {
      grid-column: 1 / -1;
    }

    &-half {
      grid-column: span calc(var(--grid-columns) / 2);
      // or grid-column: auto / span calc(var(--grid-columns) / 2);
    }
  }
}

我使用 .span-half 创建一个跨越由 --grid-columns 变量设置的列大小的一半的单元格。
但是，此计算在 Chrome 或 Safari 中不起作用。 Firefox 正确呈现 .span-half(例如，在桌面中跨越 2 列的单元格)。我在开发工具中看不到“无效值属性”。
这是一个 Codepen
https://codepen.io/Bregt/pen/oNbWvzx
我没有线索。我错过了什么？

Answer 1

在 https://developer.mozilla.org/en-US/docs/Web/CSS/calc 上找到这个

Note: The Chrome browser currently won’t accept some values returned by calc() when an integer is expected. This includes any division, even if it results in an integer.

以下是我在 Chrome 中运行的与 grid-column 相关的一些测试:grid-column: calc(4 / 2); = 无效的属性值grid-column: calc(1 * 2); = 作品grid-column: calc(4 * 0.5); = 无效的属性值grid-column: calc(1 + 1.5); = 无效的属性值grid-column: calc(1 + 2); = 作品grid-column: calc(1 - 2); = 作品
结论:除法不适用于 grid-column (可能还有行)。只要不使用浮点数，乘法、加法和减法就可以工作。这也适用于其他 css 属性，例如 z-index需要一个整数作为没有任何单位的值。
属性如 line-height接受浮点数的没有这个问题。