建議使用哪種方法來完成以下關於響應式網頁設計的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