基于 CSS var number 的第 nth-child 选择器

Question

我正在努力实现这样的目标

:root {
  --grid-columns: 6; /* default number of columns */
}

@media screen and (min-width: 768px) {
  :root {
    --grid-columns: 8; /* adjust number of columns for desktop */
  }
}

.grid-item:nth-child( var(--grid-columns)n + 1) ) {
  /* styles for first item in each row */
}

这在某种程度上可以用纯 CSS 实现吗？