Как я могу избавиться от hardcode в CSS Grid layout?

Question

[AlexFreedom17]

Как можно улучшить https://jsfiddle.net/v3jq2oy6/ без hardcode values? Чтоб 1, 6, 7, 12, 13, 18, 19, 24 и т.д. занимали 2 ряда по вертикале?

Answer 1

[RAX7]

.wrapper {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.box:nth-child(6n + 1),
.box:nth-child(6n + 6) {
  grid-row: span 2;
}

.box:nth-child(6n + 5) {
  grid-column: 1;
}