css多列自適應(yīng)布局

如圖，要實現(xiàn)視頻列表區(qū)域根據(jù)頁面寬度自適應(yīng)。比如現(xiàn)在是三列顯示，當(dāng)頁面寬度縮小時，自動變成兩列，當(dāng)頁面寬度變大時，也相應(yīng)地變成多列顯示。每個視頻的寬高固定，間距固定，列表區(qū)域保持居中，列表上面左右兩邊的文字跟著兩端對齊。不使用js計算，只用css + rem如何實現(xiàn)？

列表區(qū)域html結(jié)構(gòu)：

使用flex居中的話，最后一行如果沒有剛好鋪滿，則多出的視頻也居中了，但我要最后一行左對齊，也就是說視頻是從上到、下從左到右排下來的。因為列數(shù)是不確定的，所以也沒法對最后一行的視頻單獨設(shè)置flex屬性。
使用媒體查詢好像能做到，但又不知道怎么實現(xiàn)。