构建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的开始，使它低于第一个。 您还可以更改设置高度的方式，如下所示:

null

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