CSS Grid Layout - grid-row-gap every 2 Rows

Question

Is it possible to have a grid layout with row gaps, but the gap is only every 2 rows? Or have a border every 2 rows?

After that I would like to span elements over the grid. Place an extra element as line will destroy the grid, I can't overlap an already filled area.

Example Code:

body{
  background-color:gray;
}
.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 5px;
  grid-template-rows: repeat(12,20px);
  border: 1px solid black;
  background-color:lightgray;
}

.grid > div {
  background: lightblue;
  border: 1px solid cadetblue;
}



#element{
  grid-row: 5 / span 3;
}

The lightgrey element should have lines/borders every second grid row
<div class="grid">
  <div id="element">Element</div>
</div>

Example Layout:

Span Element over it:

Other solutions are also welcome.

Answer 1

To span the elements over you can use grid-row-start and grid-row-end property like -

    .item1 {
      grid-row-start: 3;
      grid-row-end: 6;
      background-color:red;
    }
    
    .grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 5px;
  grid-template-rows: repeat(12,20px);
  border: 1px solid black;

}

<div class="grid-container">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>  
      <div class="item4">4</div>
      <div class="item5">5</div>
      <div class="item6">6</div>
      <div class="item7">7</div>
      <div class="item8">8</div>  
    </div>

For the row gap don't use grid-row-gap and just add margins like

.grid > div:nth-child(4n + 1), .grid > div:nth-child(4n + 2) {
    margin-top: 1em;
}

.grid > div:nth-child(4n + 3), .grid > div:nth-child(4n + 4) {
    margin-bottom: 1em;
}

instead of adding negative margins. It will work the same. (personally i don't prefer adding negative margins as it complicates the layout, but its your choice)