Adding column lines to css grid system

Question

I would like to show some of grid columns as line. I have tried to make it with grid gap, but in this way the position of the elements in the div changes.

In Css

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

In Html

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

For example: I would like to see column lines for every 7th index of grid even if there is no item inside of div element.

Example apperance

Thank you in advance.

Answer 1

Maybe help you

.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>