如何用纯CSS实现同色单元格同列的Grid/非Grid布局

我当前项目包含大量区块，每个区块有1-2行、2-15列等宽单元格，要求同色单元格处于同一列。我尝试使用Grid布局实现，但第二行元素始终左对齐，达不到预期效果。现有代码如下：

.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；
• 接受非Grid布局方案。

内容的提问来源于stack exchange，提问作者Mr_Green