html - 将列线添加到 css 网格系统

Question

我想将一些网格列显示为线。我试图用网格间隙来制作它，但这样 div 中元素的位置就会改变。

在 CSS 中

.MyTable{
  width:auto;
  height:1000px;
  display: grid;
  grid-template-columns: repeat(365, 1fr);
  border: 1px solid black;
}

在 HTML 中

<div class="MyTable"></div>

例如:即使 div 元素内没有任何元素，我也想查看网格的每 7 个索引的列行。

Example apperance

提前谢谢你。

Answer 1

也许对你有帮助

.MyTable {
  width: auto;
  height: 1000px;
  display: grid;
  grid-template-columns: repeat(365, 1fr);
  counter-reset: counter -1;
  margin-top: 1.5em;
}

div {
  border: 1px solid black;
  width: 1em;
  counter-increment: counter;
}

.MyTable div:nth-child(7n) {
  border-color: red;
  position: relative;
}

.MyTable div:nth-child(7n)::before {
  content: counter(counter);
  position: absolute;
  top: -1.4em;
}

<div class="MyTable">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>