Как повторить сетку-шаблон-зоны? - PullRequest
Новая
       6

Как повторить сетку-шаблон-зоны?

2 голосов
/ 05 марта 2020

У меня проблема с сеткой. Я хочу создать что-то вроде этого: enter image description here

Я хочу, чтобы эта схема повторилась несколько раз. Но мой код не гибкий ie. 

.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>

как улучшить сетку? Я хочу повторить схему 3 3 1. Если у меня будет около 100 элементов, это решение будет невыносимым

1 Ответ

1 голос
/ 05 марта 2020

Вы можете упростить, как показано ниже. Нет необходимости в grid-template-areas или 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>
...