动态灵活的网格布局

Question

我希望仪表板与灵活的网格相对应，具有以下要求：

• 总宽度是可变的，并且必须始终适合屏幕，即使在调整大小
• 单元格可以合并
• 所有列应具有相同的大小（例如，有3列）
• 与行相同
• 总高度应选择适合屏幕高度
• 这些网格是用户生成的，因此它们不能像在线生成器那样进行CSS硬编码。

以下是我制作的一些照片：

用户定义网格的示例

合并单元格的相同示例

缩放相同的示例

我正在寻找一个插件/代码来实现这一点，因为我几乎可以肯定它不能在CSS中完成（据我所知，在大多数浏览器中还没有实现网格布局）。 我得到的最接近的是生成一个表格，但是调整单元格的大小最终是一个完整的混乱（why doesn't this table look neat?）。

Answer 1

您可以使用http://masonry.desandro.com/或http://www.wookmark.com/jquery-plugin

等插件来接近这一点

对于响应位，我建议阅读http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout。它讨论了砌体插件，但这些概念可以普遍应用。