如何构建模块化网格？

Question

现在很多网站都是使用网格，预制网站或自定义网站构建的。我注意到的是，大多数这些网格都是基于行，并且通常使用列的宽度，而不考虑元素（模块）的高度。

我想知道构建模块化网格的最佳方式（或可能性是什么）是什么？通过模块化网格我理解这样的网格，其中各个模块可以在宽度和高度上设置并且根据屏幕是流动的。一个网格，你知道你已经说了12列和9行（每个都会给出宽度/高度），你可以用马赛克这样的模块填充它（这听起来几乎太简单了） ）。

以下是我的想法（从here借来的图片）的示例图片：

我发现了几个例子，但大多数都没有响应或使用Flash构建。我相信有办法做到这一点，只是不确定自己如何。

我知道可能没有一种正确的方法，但我对可行的技术感到好奇。谢谢！

Answer 1

这种布局技术通常称为 masonry ，这里有一些响应式砌体链接可以帮助您入门：
http://masonry.desandro.com
http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout

祝你好运！

Answer 2

我不得不说你最好的选择是使用Bootstrap或Foundation来构建它，因为它们被设置为处理这种事情。他们有类，假设你使用12列网格开始，让你选择他们可以占用多少列。

链接： http://getbootstrap.com/

http://foundation.zurb.com/