这里是另一个“不可穿透的语法”相同的其他（我是作者的其他方式）

html {
  --c: #222; /* color */
  --t: 2px; /* thickness */
  --d: 10px; /* control the dashes */
  --g: 50px;  /* distance between vertical lines */
  --w: 150px; /* distance between horizontal lines*/
 
  background:
    conic-gradient(from 90deg at var(--t) var(--t),#0000 25%,var(--c) 0)
     0 0/var(--w) calc(4*var(--g)),
    conic-gradient(at 50% var(--t),#0000 75%,var(--c) 0)
     0 0/var(--d) var(--g);

}

字符串
这并不简单，CSS的作者也没有把它弄得很难。我只是使用了一个优化的代码，你可以很容易地使用CSS变量来控制它，但是你不能很容易地调整它来创建另一种网格。你需要一个不同的代码来实现这一点。

感谢Temani Afif帮助我实现目标。
对于其他人努力理解，我结束了与

background-image : conic-gradient(at 50% 1px, transparent 75%, var(--line-color) 0turn);

字符串
其中1px是行高。
显式的0turn可能有助于解释渐变是如何工作的。我仍然在弄清楚它是如何生成“-"的。
下面的背景样式属性在最初的答案中嵌入在background属性中，我更愿意在我自己的CSS中单独指定，以便维护人员（和我未来的自己）更清楚。

background-size     : 10px calc(var(--row-height) + 1px);
background-position : 0px var(--row-height);

型
其中10px是虚线和直线所占的总宽度。50% x渐变的起始位置意味着它是一个偶数图案。
因此，我们创建的是一个10 ×（行高+1）的块，它在x和y维度上重复。