Offset CSS grid items on explicitly placed rows - html

Question

I'm trying to achieve the following with 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 in the HTML but I cannot re-order the elements or add wrapping elements.
I have almost achieved this by using explicit grid-row values. Is it possible to position the last two rows starting at the fourth column without explicitly specifying the grid-column property individually for each element? (For brevity I've kept it to 6 here but there's more in the actual layout)
Here's what I have so far. As you can see, the two rows for E and F start on column 1.
I can add grid-column: 4 to .c13 but the subsequent elements in the row flow back to 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>

Answer 1

You can add pseudo-elements to the .grid to block out the bits you don't want to use. CSS Grid will treat the pseudo-element as a grid-item and use up the space specified.
In your case these rules should work:
.grid:before{
content:'';
grid-column: 1 / 4;
grid-row: 4 / -1;
}
.grid:after{
content:'';
grid-column: 7 / 10;
grid-row: 4 / -1;
}
Here's an example of it for you to play with: https://codepen.io/chrisboon27/pen/Lddpqa
I added in the text and background-color to make it easier to see what is going on, but you would just remove those.