是否可以从css中的attr()获取正则表达式?

我正在尝试制作自己的css网格框架,以便更好地理解它。我想做的是指定某物跨越多少行列。为此,我想使用一些正则表达式。

目前,我有这个html:

<div class="wrapper">
  <div class="item-1 span1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
  <div class="item-4">Item 4</div>
  <div class="item-5">Item 5</div>
  <div class="item-6">Item 6</div>
  <div class="item-7">Item 7</div>
  <div class="item-8">Item 8</div>
  <div class="item-9">Item 9</div>
  <div class="item-10">Item 10</div>
  <div class="item-11">Item 11</div>
  <div class="item-12">Item 12</div>
  <div class="item-13">Item 13</div>
  <div class="item-14">Item 14</div>
  <div class="item-15">Item 15</div>
  <div class="item-16">Item 16</div>
</div>

使用此css:

@import "reset.css";
:root{
  width: 100vw;
  height: 100vh;
  --box-color: #eee;}
body{
  min-width: 100%;
  min-height: 100%;}

.wrapper{
  position: absolute;
  width: 100%;
  height: 100%;
}

* [class*=span]{
  background: var(--box-color);
}

* [class*=span]::before{
  content: attr(class);
}

目前,css只将背景设置为灰色,如果它有一个类跨度。那么我想 grid-row: <span-(number)> .

是否可以使用纯css来完成这项工作,或者我也必须使用javascript?
如果我只能使用css,我怎么能做到这一点呢?