在我目前的项目中,我有大量的部分,每个部分有一到两行,从2到15列不等,等宽.相同 colored颜色 的单元格放置在同一列中.分区的定位如下所示:
为了实现上述布局,我使用了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>
需要注意的是:
- 相同 colored颜色 的单元格最多只能为2个.
- 相同 colored颜色 的单元格总是连续的.
- CSS解决方案除了添加类之外,不能做HTML更改.
- 我不能使用脚本,因为这将是我的项目的巨大努力,现在负担不起.
- 非网格解决方案也很受欢迎.