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

Question

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

更大的屏幕看起来像这样

屏幕小一点

小屏幕仍然

（在图像中每个块看起来稍微大一点，因为屏幕尺寸减小，这不是我真正想要的每个屏幕应该是相同的大小...如果你看过netflixs类型页面这正是我正在寻找的）

我不需要完成抛光的代码示例，但我只是如何做到这一点（有15个媒体查询只是处理网格和移动元素似乎不是答案或它是什么？）任何洞察我如何能够做到这一点或框架或演示正在实施这将是非常感谢。

Answer 1

我真的没有看到使用网格的意义。 它会给你带来更多的麻烦而不是帮助你。 由于大多数网格都会尝试使元素响应，并会调整它们的大小，以便在较小的宽度上将它们放在同一条线上。 由于您不希望图像调整大小，因此根本不要使用响应式网格...

您可以选择普通网格，但为什么要输入1000多行代码，以便可以在一行中完成。

几行代码（如果写在一行上）：

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