是否可以定义一个最大列数的网格，但是当屏幕宽度改变时允许元素包装到新行上？
我有隐式类，允许行包装到新行上，但是没有最大列数。
这是使用弹性盒的一种方法的代码笔
CSS：
.flex-container {
display: flex;
flex-wrap: wrap;
}
另一种方法是使用网格
.grid {
display: grid;
counter-reset: grid-items;
position: relative;
}
.grid--auto-fit {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
我想要一个相当通用的解决方案，没有Java脚本或媒体查询，我想实现的目标是否可能？
.wrapper {
border: 5px solid pink;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.a-fc {
background-color: purple;
width: 300px;
/*height: 100px;*/
}
.b-fc {
background-color: orange;
display: flex;
flex-direction: column;
/*flex-wrap: wrap;*/
flex-basis:70px;
flex-grow:1;
}
.b-fc > * {
flex-grow: 1;
flex-basis: 100px;
}
.b-fc > *:nth-child(1) {
background-color: red;
}
.b-fc > *:nth-child(2) {
background-color: blue;
}
.b-fc > *:nth-child(3) {
background-color: green;
}<div class="wrapper">
<div class="a-fc">
<div>a1</div>
</div>
<div class="b-fc">
<div>b1</div><div>b2</div><div>b3</div>
</div>
</div>FC = 弹性容器。FI = …
所以我想做的就是根据其高度更改div元素的颜色。
例如：如果div的高度<= 20％，我希望它是绿色，如果它的20％以上，它应该是蓝色。
我想仅使用CSS来实现（如果可能的话）