How to repeat a grid-template-areas?

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%;
}

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

user_8620333 · Answer

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;
}

How to repeat a grid-template-areas?

1 Answers