Offset CSS grid elements to explicitly placed lines

Question

I am trying to do the following using CSS Grid Layout:

A                    A
B  B  B  B  B  B  B  B
C  C     E  E  E  E  E
         D  D  D
         F  F  F

I can add classes to HTML, but I cannot override elements or add packaging elements.

I almost achieved this using explicit values grid-row. Is it possible to position the last two rows, starting from the fourth column , without explicitly specifying a property grid-columnfor each element ? (For brevity, I saved it to 6, but there is more in the actual layout)

Here is what I still have. As you can see, the two rows for Eand Fbegin in column 1.

I can add grid-column: 4in .c13, but subsequent elements in the row are returned in column 1.

.grid {
  display: grid;
  grid-template-rows: repeat(5, 2em);
  grid-gap: 0.5em;
  text-align: center;
}

.c2 {
  grid-column: 8;
}

.c16 {
  grid-column: 4;
}

.extra1 {
  grid-row: 4;
}

.extra2 {
  grid-row: 5;
}

.global1 { background-color: #ccc; }
.intra1 { background-color: lightblue; }
.intra2 { background-color: yellow; }
.intra3 { background-color: purple; color: white; }
.extra1 { background-color: orange; }
.extra2 { background-color: #f66; }

<p>You need a browser that supports CSS Grid Layout for this.</p>

<section class='grid'>
  <div class='c1 global1'>A</div>
  <div class='c2 global1'>A</div>
  <div class='c3 intra1'>B</div>
  <div class='c4 intra1'>B</div>
  <div class='c5 intra1'>B</div>
  <div class='c6 intra1'>B</div>
  <div class='c7 intra1'>B</div>
  <div class='c8 intra1'>B</div>
  <div class='c9 intra1'>B</div>
  <div class='c10 intra1'>B</div>
  <div class='c11 intra2'>C</div>
  <div class='c12 intra2'>C</div>
  <div class='c13 extra1'>D</div>
  <div class='c14 extra1'>D</div>
  <div class='c15 extra1'>D</div>
  <div class='c16 intra3'>E</div>
  <div class='c17 intra3'>E</div>
  <div class='c18 intra3'>E</div>
  <div class='c19 intra3'>E</div>
  <div class='c20 intra3'>E</div>
  <div class='c21 extra2'>F</div>
  <div class='c22 extra2'>F</div>
  <div class='c23 extra2'>F</div>
</section>

Run code

Answer 1

- .grid, , . CSS Grid . :

.grid:before{
  content:'';
  grid-column: 1 / 4;
  grid-row: 4 / -1;
}
.grid:after{
  content:'';
  grid-column: 7 / 10;
  grid-row: 4 / -1;
}

: https://codepen.io/chrisboon27/pen/Lddpqa , , , .