Question

我决定在项目中使用卡片UI并检查一些类似砌体的库，似乎所有这些都使用position: absolute来安排元素。

IMO这种方法不适合用于某些目的，例如我的卡片是可扩展/可折叠的（如Google加上帖子评论），虽然这可以在砌体中动画，但它会导致元素完全重新排列（它不会只需将元素向下推，元素从列跳到列。）

我查看了G +的标记，它们根据屏幕宽度（响应性）动态插入1,2或3 DIV作为列，然后用元素填充此列。通过这种方式，元素具有正常的位置和行为，因此如果您需要添加，删除或展开/折叠，只需将元素插入DOM或更改height，浏览器就会进行定位。

它们还会处理整体高度，因此在下一个Ajax加载中，它会以列高度几乎相同的总高度（就像砌体）的方式计算和分配列中的元素

他们使用任何特定的图书馆吗？

是否存在以类似方式工作的响应式框架/库？

Answer 1

我遇到了完全相同的问题，我认为 Salvattore 正是您正在寻找的。它会自动创建一些列，并将所有网格元素放入右列。因此，样式完全取决于您，因此不需要任何position:absolute。

事实上，这就是你需要的所有造型：

.size-1of3 {
    width: 33.333%;
}