css - 选择响应式/流体网格框架/模板

Question

嘿，所以我一直在网上查看一些流体网格和响应式网格框架的示例(我相信我正在寻找流体但仍然不确定)。并且想知道这里是否有人可以帮助我指出一些可用代码的方向，因为我不完全确定如何使用纯 css 实现(可能需要 javascript/jquery)无论如何这就是我正在寻找的东西:

大屏幕看起来像这样

屏幕小一点

屏幕仍然较小

(在图像中，随着屏幕尺寸的减小，每个 block 都显得更大一点，这不是我真正想要的，每个屏幕的尺寸应该相同......如果你看过 netflixs 流派页面，这正是我正在寻找的)

我不需要一个完美的代码示例，但我将如何去做(有 15 个媒体查询来处理网格和四处移动元素似乎不是答案或是吗？)任何关于我如何做到这一点的见解或正在实现的框架或演示将不胜感激。

Answer 1

我几乎看不出为此使用网格有什么意义。比帮助你更让你头疼。由于大多数网格会尝试使元素响应并调整它们的大小，以便在较小的宽度上将它们放在同一行上。而且由于您不希望调整图像大小，所以根本不要转到响应式网格...

您可以选择普通网格，但为什么要导入 1000 多行代码才能在 1 行内完成。

几乎一行代码(如果写在一行上):

ul li {
    display: inline-block;
    *display: inline;
    zoom:1;
    vertical-align: top;
    width: 50px;
    height: 50px;
    margin: 0 10px 10px 0;
    background-color: #000;
}

Demo