我试图在不使用Packery或任何JS的情况下创建pinterest样式布局。我尝试过使用CSS3列，但它们是垂直堆叠的。
看到这里的小提琴， https://jsfiddle.net/2otpzbgt/1/
column-count: 3;
是我使用的，卡片显示为1,6,11等。是否可以显示为1,2,3 ??
我试图解决的目的是具有动态内容的网格布局，其中图像大小（高度）将变化（类似于pinterest），但是只有在手头知道图像的高度时才能安排包装。我在滚动时懒得加载图像和抓取卡片。
谢谢！
答案 0 :(得分：1)
删除column-fill: auto;并解决您的问题
答案 1 :(得分：1)
如果使用列，那就是内容的堆叠方式 - 以列为单位，即垂直。
如果要水平堆叠内容，则需要将容器的宽度设置为auto，将高度设置为设置的像素数量（例如600px），并确保显示溢出。然后，您可以将网格项添加到div中（确保它们向左浮动），它们将开始水平堆叠。
这样很遗憾，由于高度不同，网格中存在一些空白，但如果你有这样的网格： Grid 并且想要横向编号，这并不容易。我想这就是创建水平排序的动态网格并不那么简单的原因。
答案 2 :(得分：-1)
我最终删除了所有列。我知道这是激进的，但你能用这样的东西工作吗？我或多或少地对网站进行编码。只需更改.pin：https://jsfiddle.net/costumingdiary/p0czqdz0/
中的宽度，它就可以使其响应
cascade=true