建议使用哪种方法来完成以下关于响应式网页设计的CSS显示。响应式列
我真的只有一个要求。最多三列。所以如果有20个字母，他们会在三列之间平分。
SCSS被使用。 Flexbox和CSS网格也是受欢迎的。我不想使用Bootstrap（我知道网格系统存在）。
屏幕宽度1000像素<：
A D G
B E H
C F
屏幕宽度< 500px的
A E
B F
C G
D H
屏幕宽度< 200像素：
A
B
C
D
E
F
G
H
下面是一个与一些起始代码codepen。我似乎无法找出一个足够好的系统。
https://codepen.io/basickarl/pen/NjgvNa
我想用CSS网格，但是这并没有使动态了（硬编码的定位）。这个列表中的项目将会改变。
只有这样，才能实现具体我什么之后创建两个单独的列（每片含A到H）。一个与三个，另一个与两个（变成一个）。一个隐藏，另一个隐藏，反之亦然。
不知道你是否在寻找这个，但它的工作原理。
div {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
max-width: 1200px;
}
@media screen and (min-width: 1000px) {
div {
background: red;
}
el {
width: 33.3333%;
}
}
@media screen and (min-width: 500px) and (max-width: 1000px) {
div {
background: grey;
}
el {
width: 50%;
}
}
@media screen and (min-width: 200px) and (max-width: 500px) {
div {
background: lime;
}
el {
width: 100%;
}
}
el {
text-align: center;
background: green;
margin: 2em 0em;
align-self: flex-start;
}<div>
<el>A</el>
<el>B</el>
<el>C</el>
<el>D</el>
<el>E</el>
<el>F</el>
<el>G</el>
<el>H</el>
</div>此外，对于n列，你可以这样做：
el {
width: calc(100%/n);
}
您是否使用bootstrap http://getbootstrap.com/尝试了它。 您可以使用Cols属性并轻松获得上述结果 –
如果您打算根据像素宽度（这是设备特定的而无用且缺乏含义）编写三组不同的规则，那么您可以很好地使用CSS网格 - - 这就是他们的目的。至于像素宽度 - 我建议您在媒体查询中使用'em'单位来表示宽度（比如'@media（max-width：20em）{/ * ... * /}'），而不是像素。或者只是采用宽高比，这可能会更好：'@media（min-aspect-ratio：1）{/ * ... * /}'。还有[其他属性可以使用]（https://www.w3.org/TR/css3-mediaqueries/），但你可能知道这些。 – amn
您需要在此处发布您的示例代码，而不是明天可以更改或消失的第三方网站。另外，SO是针对特定问题的具体问题，而不是询问意见，也不是要求我们为您编写代码。 – Rob