Consecutive same color cells should be in same column, gridbox

Question

In my current project I have huge number of sections, each section has one or two rows ranging from 2 to 15 columns, of equal widths. The same colour cells are placed in same column. The positioning of a section is as shown below:

To achieve the above layout, I am using gridbox. I came close to the solution but the second row is kind of aligning to the left always.

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

Somethings to note:

• Same colour cells will be max to 2 only.
• Same colour cells are always consecutive.
• Only CSS solution. Can't do HTML changes other than adding classes.
• Can't use JavaScript because that will be huge effort for my project and can't afford now.
• Non-grid solution is also welcome.

Answer 1

You only need to add:

• grid-auto-flow: column; to the container
• grid-row: 1; to field

And it will work:

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

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

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

Answer 2

You could add grid-column-start to the color classes and define grid-auto-flow in the container class:

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

Answer 3

.containerMain {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-flow: column;
  gap: 5px 10px;
  background-color: steelblue;
}

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

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

/* colours */

.colour-black {
  grid-column-start: 1;
  background: black;
}

.colour-blue {
  grid-column-start: 2;
  background: blue;
}

.colour-yellow {
  background: yellow;
}

.colour-red {
  grid-column-start: 7;
  background: red;
}

.colour-orange {
  grid-column-start: 5;
  background: orange;
}

.colour-purple {
  grid-column-start: 6;
  background: purple;
}

.colour-green {
  grid-column-start: 3;
  background: green;
}

.colour-brown {
  grid-column-start: 4;
  background: brown;
}

.colour-violet {
  grid-column-start: 8;
  background: violet;
}

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

You can try this approach as well!

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

And CSS:

.containerMain {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-flow: column;
  gap: 5px 10px;
  background-color: steelblue;
}

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

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

/* colours */

.colour-black {
  grid-column-start: 1;
  background: black;
}

.colour-blue {
  grid-column-start: 2;
  background: blue;
}

.colour-yellow {
  background: yellow;
}

.colour-red {
  grid-column-start: 7;
  background: red;
}

.colour-orange {
  grid-column-start: 5;
  background: orange;
}

.colour-purple {
  grid-column-start: 6;
  background: purple;
}

.colour-green {
  grid-column-start: 3;
  background: green;
}

.colour-brown {
  grid-column-start: 4;
  background: brown;
}

.colour-violet {
  grid-column-start: 8;
  background: violet;
}

Answer 4

Given your specific requirements (CSS-only, no HTML modifications beyond class additions, and no JavaScript), these solutions offer a starting point. The Grid solution provides a more structured layout with manual column assignments, while the Flexbox approach offers greater flexibility at the expense of strict vertical alignment. Adjustments may be necessary based on your project's specific needs and the maximum number of columns you expect.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 5px 10px;
  background-color: steelblue;
  grid-auto-flow: dense;  
}
 
.field {
  box-shadow: inset 0 0 2px #ffffff;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  
  min-width: 60px;  
}

/* Color classes */
.colour-black { background-color: black; }
.colour-blue { background-color: blue; }
.colour-green { background-color: green; }
.colour-brown { background-color: brown; }
.colour-orange { background-color: orange; }
.colour-purple { background-color: purple; }
.colour-red { background-color: red; }
.colour-violet { background-color: violet; }

 
.field.colour-blue.second-row {
  grid-column: 2 ;  
}


.field.colour-red.second-row {
  grid-column: 7;  
}

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