CSS Grid Repeat Grid Layout - css

Question

I am creating a repeating grid system, in which I need to repeat the same structure as the first 7 items. Divs A to G is generating the result I want and all other div are coming on right position column wise but only H and M (The first and sixth item in new row and) not taking the desired height.
H need to equal to height of I and J combine and M need to be equal to K and L's combine height, same as A and F:
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, [col] 1fr);
grid-template-rows: repeat(10, [row] auto);
grid-gap: 1em;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
display: flex;
align-items: center;
}
.box:nth-of-type(7n+1) {
grid-column: col / span 2;
}
.box:nth-of-type(7n+3) {
grid-column: col 3 / span 1;
}
.box:nth-of-type(7n+4),
.box:nth-of-type(7n+5) {
grid-column: col 1 / span 1;
}
.box:nth-child(7n+6) {
grid-column: col 2 / span 2;
}
.box:nth-child(7n+7) {
grid-column: col 1 / span 3;
}
.box:first-child {
grid-row: row / span 2;
}
.box:nth-child(2) {
grid-row: row;
}
.box:nth-child(3) {
grid-row: row 2;
}
.box:nth-child(4) {
grid-row: row 3;
}
.box:nth-child(5) {
grid-row: row 4;
}
.box:nth-child(6) {
grid-row: row 3 / span 2;
}
<div class="wrapper">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">E</div>
<div class="box">F</div>
<div class="box">G</div>
<!-- items with same spans need to be repeted -->
<div class="box">H</div>
<div class="box">I</div>
<div class="box">J</div>
<div class="box">K</div>
<div class="box">L</div>
<div class="box">M</div>
<div class="box">N</div>
</div>

Answer 1

First of all I simplified your code:
using only the nth-child logic for the row-column sizing,
removed grid-template-rows and the naming of the grid lines,
The issue we have now is that the boxes E and F are out of place from the rows:
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* grid-template-rows: repeat(10, [row] auto); */
grid-gap: 1em;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
display: flex;
align-items: center;
}
.box:nth-of-type(7n+1) {
grid-column: span 2;
grid-row: span 2;
}
.box:nth-child(7n+6) {
grid-column: span 2;
grid-row: span 2;
}
.box:nth-child(7n+7) {
grid-column: span 3;
}
<div class="wrapper">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">E</div>
<div class="box">F</div>
<div class="box">G</div>
<!-- items with same spans need to be repeted -->
<div class="box">H</div>
<div class="box">I</div>
<div class="box">J</div>
<div class="box">K</div>
<div class="box">L</div>
<div class="box">M</div>
<div class="box">N</div>
</div>
Now you can shift the F to the last two columns using grid-column: 2 / 4 and then use grid-auto-flow: dense to pull it up - see demo below:
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
/*grid-template-rows: repeat(10, [row] auto);*/
grid-auto-flow: dense; /* fills in the spaces */
grid-gap: 1em;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
display: flex;
align-items: center;
}
.box:nth-of-type(7n+1) {
grid-column: span 2;
grid-row: span 2;
}
.box:nth-of-type(7n+5) {
grid-column: 1;
}
.box:nth-child(7n+6) {
grid-column: 2 / 4; /* changed */
grid-row: span 2;
}
.box:nth-child(7n+7) {
grid-column: span 3;
}
<div class="wrapper">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">E</div>
<div class="box">F</div>
<div class="box">G</div>
<!-- items with same spans need to be repeted -->
<div class="box">H</div>
<div class="box">I</div>
<div class="box">J</div>
<div class="box">K</div>
<div class="box">L</div>
<div class="box">M</div>
<div class="box">N</div>
</div>