连续的相同颜色单元格应位于同一列、网格框中

Question

在我当前的项目中，我有大量的部分，每个部分都有一两行，从 2 到 15 列，宽度相等。相同颜色的单元格放置在同一列中。一个section的定位如下图：

为了实现上述布局，我使用了gridbox。我接近解决方案，但第二行总是向左对齐。

.container {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
  gap: 5px 10px;
  background-color: steelblue;
}

.field {
  background-color: black;
  box-shadow: inset 0px 0px 2px #ffffff;
  height: 20px;
  color: white;
  text-align: center;
}

.second-row {
  grid-row-start: 2;
}


/* colours */

.colour-black {
  background: black;
}

.colour-blue {
  background: blue;
}

.colour-yellow {
  background: yellow;
}

.colour-red {
  background: red;
}

.colour-orange {
  background: orange;
}

.colour-purple {
  background: purple;
}

.colour-green {
  background: green;
}

.colour-brown {
  background: brown;
}

.colour-violet {
  background: violet;
}

<div class="container">
  <div class="field colour-black">1</div>
  <div class="field colour-blue">2</div>
  <div class="field colour-blue second-row">3</div>
  <div class="field colour-green">4</div>
  <div class="field colour-brown">5</div>
  <div class="field colour-orange">6</div>
  <div class="field colour-purple">7</div>
  <div class="field colour-red">8</div>
  <div class="field colour-red second-row">9</div>
  <div class="field colour-violet">10</div>
</div>

注意事项：

• 相同颜色的单元格最多只能有 2 个。
• 相同颜色的单元格总是连续的。
• 唯一的 CSS 解决方案。除了添加类之外无法更改 HTML。
• 不能使用 JavaScript，因为这对我的项目来说是巨大的工作量，但现在负担不起。
• 也欢迎非网格解决方案。

Answer 1

您可以将

grid-column-start

添加到颜色类并在容器类中定义

grid-auto-flow

：

    .container {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-auto-flow: column;
        gap: 5px 10px;
    }
    .colour-black {
        grid-column-start: 1;
        background: black;
    }
    .colour-blue {
        grid-column-start: 2;
        background: blue;
    }    
    .colour-green {
        grid-column-start: 3;
        background: green;
    }    
    .colour-brown {
        grid-column-start: 4;
        background: brown;
    }    
    .colour-orange {
        grid-column-start: 5;
        background: orange;
    }    
    .colour-purple {
        grid-column-start: 6;
        background: purple;
    }    
    .colour-red {
        grid-column-start: 7;
        background: red;
    }    
    .colour-violet {
        grid-column-start: 8;
        background: violet;
    }    

<div class="container">
  <div class="field colour-black">1</div>
  <div class="field colour-blue">2</div>
  <div class="field colour-blue">3</div>
  <div class="field colour-green">4</div>
  <div class="field colour-brown">5</div>
  <div class="field colour-orange">6</div>
  <div class="field colour-purple">7</div>
  <div class="field colour-red">8</div>
  <div class="field colour-red">9</div>
  <div class="field colour-violet">10</div>
</div>