Как соблюдать сетку grid при динамической подгрузке контента?

Question

[Aljo]

Здравствуйте!
Есть разметка, в которой каждый 5ый элемент занимает две строки и два столбца.
Ранее подугрзки не было, теперь пришлось ее сделать, а в гридах я не силен, так как всегда использовал flex.
Набросал пример, подскажите пожалуйста, как переписать в CSS стили, чтобы при подугрзке каждый 5-ый элемент не накладывался друг на друга?

Правильно ли я понимаю, что просто нужно у item-big указать:

.item.item-big {
  grid-column: span 2;
  grid-row: span 2;
}

Comments

[Владимир Е]

Здравствуйте
Немного подправил стили

.item {
  background: #cd4747;
  margin-bottom: 15px;
}
.item:nth-child(6n+2) {
  background: #3c8f3c;
}
.item:nth-child(6n+3) {
  background: #4986a3;
}
.item:nth-child(6n+4) {
  background: #444;
}
.item:nth-child(6n+6) {
  background: #9100ff;
}
.item.item-big {
    grid-column: span 2;
    grid-row: span 2;
    background: #e7b3b3;
}

Answer 1

[Aljo]

Добавил

.item.item-big {
  grid-column: span 2;
  grid-row: span 2;
}