CSS网格：带有标签的行

Question

我正在使用css-grid构建纯CSS图。有没有办法用文本标记网格线？在所附的图像中，我要标记垂直线：1、2、3、4。

Codepen

grid-template-columns: 150px repeat(12, 1fr);

Answer 1

您可以使用:after伪元素为每一行添加数字，并且可以使用CSS计数器根据第一行中元素的数量为每一列增加数字。

通过在counter-reset上定义第二个参数即数字，可以从1而不是0开始计数。

.grid {
  display: inline-grid;
  position: relative;
  counter-reset: columnLines 1 rowLines 1;
  grid-template-rows: repeat(3, 100px);
  border: 1px solid black;
  margin: 25px;
}

.row {
  display: grid;
  position: relative;
  grid-template-columns: repeat(3, 100px);
  counter-increment: rowLines;
}

.row:not(:last-child) {
  border-bottom: 1px solid black;
}

.row > div:not(:last-child) {
  border-right: 1px solid black;
}

/*Column lines*/
.row:first-child:before {
  content: "1";
  transform: translate(-50%, -100%);
  position: absolute;
  top: 0;
  left: 0;
}

.row:first-child > div {
  counter-increment: columnLines;
  position: relative;
}

.row:first-child > div:after{
  transform: translate(50%, -100%);
  content: counter(columnLines);
  position: absolute;
  top: 0;
  right: 0;
}

/*Row lines*/
.row:after {
  transform: translate(100%, 50%);
  content: counter(rowLines);
  position: absolute;
  bottom: 0;
  right: -5px;
}

.grid:before {
  transform: translate(100%, -50%);
  position: absolute;
  right: -5px;
  content: "1";
  top: 0;
}

<div class="grid">
  <div class="row">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="row">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="row">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>