Comment répéter une grille de modèles d'espaces ?

Question

J'ai un problème avec la grille. Je veux créer quelque chose de semblable à ceci :

Je veux que ce schéma se répète plusieurs fois. Mais mon code n'est pas flexible.

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

comment améliorer la grille ? Je veux répéter le schéma 3 3 1. Si j'ai environ 100 éléments, cette solution sera insupportable

Answer 1

Vous pouvez simplifier comme ci-dessous. Pas besoin de grid-template-areas ou grid-template-columns

.grid {
  margin: 0 auto;
  display: grid;
  grid-gap: 20px;
}

.grid > .item:nth-child(7n) {
  /* cela créera une mise en page à 3 colonnes et forcera chaque 7ème élément à les traverser toutes */
  grid-column:span 3; 
}

.item {
  background: red;
  border: 4px solid black;
  height: 20px;
}