In my current project, I am dealing with a large number of sections. Each section contains one or two rows with columns ranging from 2 to 15, all of equal width. The cells of the same color are placed in the same column, and the layout looks like this:
https://i.sstatic.net/3eS2c.png
To achieve this layout, I am using gridbox. I have almost solved the issue, but the alignment of the second row seems to be consistently off to the left.
.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>Here are some important points to keep in mind:
- Each color group can consist of only a maximum of 2 cells.
- Cells of the same color are always grouped together.
- Only CSS solutions are acceptable - no changes to HTML structure other than adding classes allowed.
- A JavaScript solution is not feasible due to the size of the project and time constraints.
- Alternative non-grid solutions are also welcome.