Проблема с построением шаблона сетки CSS

Question

Я пытаюсь создать следующий шаблон сетки css, но борюсь с последними 3 элементами.

есть ли у кого-нибудь идея решить эту проблему?

Я думаю, проблема в высоте вторая строка (элементы 4,5,6)

.grid {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(12, 1fr);

    .col {
        
        &:nth-child(10n+1),
        &:nth-child(10n+2),
        &:nth-child(10n+10) {
            grid-column: auto / span 3;
            height: 580px;
            background-color: red;
        }

        &:nth-child(10n+3),
        &:nth-child(10n+7) {
            grid-column: auto / span 6;
            height: 580px;
            background-color: yellow;
        }
        
        &:nth-child(10n+4),
        &:nth-child(10n+5),
        &:nth-child(10n+6) {
            grid-column: auto / span 4;
            height: 430px;
            background-color: green;
        }

        &:nth-child(10n+8),
        &:nth-child(10n+9) {
            grid-column: auto / span 3;
            height: 275px;
            background-color: blue;
        }
    }
}

Шаблон:

Шаблон

Результат:

Результат

Answer 1

вы почти в порядке, вам просто нужно настроить начало последнего синего div так, чтобы оно было ниже первого. Вы также можете изменить способ установки высоты, как показано ниже:

.grid {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow:dense; /* this will fix the position of the last red */
}

.grid .col:nth-child(10n+1),
.grid .col:nth-child(10n+2),
.grid .col:nth-child(10n+10) {
  grid-column: span 3;
  grid-row: span 2; /* take two rows */
  background-color: red;
  height:200px; /* define the height for only the red and the blue, yellow will follow */
}

.grid .col:nth-child(10n+3),
.grid .col:nth-child(10n+7) {
  grid-column:span 6;
  grid-row: span 2; /* also take two rows */
  background-color: yellow;
}

.grid .col:nth-child(10n+4),
.grid .col:nth-child(10n+5),
.grid .col:nth-child(10n+6) {
  grid-column:span 4;
  background-color: green;
  height:150px; /* the green are alone so they need a height */
}

.grid .col:nth-child(10n+8),
.grid .col:nth-child(10n+9) {
  grid-column-end: span 3;
  background-color: blue;
}
/* this will fix your issue */
.grid .col:nth-child(10n+9) {
  grid-column-start:7
}
/* */

<div class="grid">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>