How to repeat a grid-template-areas? - html

Question

I have problem with grid. I want create some like this:
I want this schema repeat a few times.
But my code is not flexie.
.grid {
margin: 0 auto;
display: grid;
grid-template-columns: 32% 32% 32%;
grid-column-gap: 20px;
grid-row-gap: 20px;
grid-template-areas: "a b c"
"d e f"
"g g g"
"h i j"
"k l m"
"o o o";
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
.item3 {
grid-area: c;
}
.item4 {
grid-area: d;
}
.item5 {
grid-area: e;
}
.item6 {
grid-area: f;
}
.item7 {
grid-area: g;
}
.item {
background: red;
border: 4px solid black;
height: 20px;
width: 100%;
}
<div class="grid">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
<div class="item item6"></div>
<div class="item item7"></div>
</div>
how to improve the grid?
I want to repeat the scheme 3 3 1. If I have about 100 elements this solution will be unbearable

Answer 1

You can simplify like below. No need for grid-template-areas or grid-template-columns
.grid {
margin: 0 auto;
display: grid;
grid-gap: 20px;
}
.grid > .item:nth-child(7n) {
/* this will create 3 columns layout and force each 7th element to span all of them */
grid-column:span 3;
}
.item {
background: red;
border: 4px solid black;
height: 20px;
}
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>