需要CSS魔法还是JS？

Question

我一直在使用Angular来尝试和捏造这个...但我不禁认为必须通过CSS才能实现......

我有任意数量的宽度列，每个宽度必须不小于400px。如果屏幕只能容纳4.5列@ 400px，那么我希望将宽度调整为450px或25％

除非屏幕分辨率是智能手机，否则宽度应为100％。

列必须从左到右排序。

在400px左侧浮动LI不起作用，我不能使用％base，因为我不知道（在CSS的上下文中）有多少适合...

也许我可以使用条件测试对媒体查询进行硬编码：

@media all and (max-width: 768px)  {
    width: 100%;
}
@media all and (max-width: 800px) and (min-width: 1200px)  {
    width: 50%;
}
@media all and (max-width: 1200px) and (min-width: 1600px)  {
    width: 25%;
}
@media all and (max-width: 1600px) and (min-width: 2000px)  {
    width: 20%;
}

基本上，我正在尝试创建一个网格，它可以最大化屏幕空间，但随着屏幕空间的减少而垂直折叠。

有什么想法吗？ Masonary和类似的JS库不是我想要的，但我会考虑在AngularJS中实现它，如果它是最好的/唯一的选项???