动态灵活的网格布局

Posted 2023-02-24

【中文标题】动态灵活的网格布局

【英文标题】：dynamic flexible grid layout

【发布时间】：2012-10-15 10:08:08

【问题描述】：

我希望仪表板根据具有以下要求的灵活网格布局：

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

这是我拍的一些照片：

用户定义网格示例

合并单元格的相同示例

相同的示例缩放

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

【问题讨论】：

我看不到任何实际问题，你在问什么？如何编写 CSS，一个已经完成的网站？

有很多可用的插件......你试过什么？

我试过 Masonry，但它会重新排列项目，当我只想缩小网格以适应屏幕时

【参考方案1】：

您可以通过使用像 http://masonry.desandro.com/ 或 http://www.wookmark.com/jquery-plugin 这样的插件来接近它

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

【讨论】：

Pinterest 是我试图避免的。当它只是 X 列时，我不明白人们如何称它为网格。砌体是最接近我正在寻找的东西，但我不想要重新排列的东西。

还有isotope.metafizzy.co。它很像砖石，但您可以自定义它以删除重新排列的东西。

我检查了更深入的同位素和砖石，我认为它们在流体/响应类别中具有我想要的东西，只是它们不提供垂直适合屏幕调整大小

嗯，我不确定我还能建议什么。我认为您可能必须自己选择一个并自定义它。