CSS 网格：带有 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上找到了这个

\n

\n

注意：当需要整数时，Chrome 浏览器目前不接受 calc() 返回的某些值。这包括任何除法，即使结果是整数。

\n

\n

以下是我在 Chrome 中运行的一些测试grid-column：

\n

grid-column: calc(4 / 2);= 无效的属性值

\n

grid-column: calc(1 * 2);= 作品

\n

grid-column: calc(4 * 0.5);= 无效的属性值

\n

grid-column: calc(1 + 1.5);= 无效的属性值

\n

grid-column: calc(1 + 2);= 作品

\n

grid-column: calc(1 - 2);= 作品

\n

结论：除法不适用于grid-column（可能也适用于行）。只要不使用浮点数，乘法、加法和减法就可以工作。这也适用于其他 css 属性，例如z-index需要整数作为不带任何单位的值的属性。

\n

像这样接受浮点数的属性line-height不存在这个问题。

\n

Answer 2

我已经通过多种方式测试了你的问题。这是一个calc错误。使用起来var绝对没问题。但是如果我calc单独放置一个事件var- 这也不起作用。

更新

我只是想演示简单的 JavaScript 解决方案。无论如何，您都不应该编辑代码，您可以像往常一样使用 CSS。这个JS只是获取--grid-columns并发送--grid-span回来。基本上这就是calc()CSS 所做的，但更稳定。

setDimensions(); 
window.addEventListener('resize', () => {
 setDimensions(); 
});
function setDimensions(){
  let gridColumns = getComputedStyle(document.documentElement).getPropertyValue('--grid-columns');
  document.documentElement.style.setProperty('--grid-span', gridColumns / 2);
}

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

@media (min-width: 500px) {
  :root {
    --grid-columns: 4;
  }
}

.span-full {
  grid-column: 1 / -1;
}

.span-half {
  grid-column: span var(--grid-span);
}

.cell {
  background: #77dd77;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  font-weight: bold;
}

<div class="grid">
  <div class="cell span-full">full</div>
  <div class="cell span-half">half</div>
  <div class="cell span-half">half</div>
  <div class="cell span-half">half</div>
  <div class="cell">single</div>
  <div class="cell">single</div>
  <div class="cell">single</div>
  <div class="cell">single</div>
  <div class="cell span-half">half</div>
</div>