没有定义列的纯CSS砌体布局

Question

我写了一个如上所述的布局。我通过简单地使用宽度和高度不同的display: inline-block和article元素来实现这一点，例如：

width: 50%; /* this is variable*/
height: 160px;  /* this is also variable*/
padding: 10px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;

现在这已经可以了，但是：您看到框4和5上方的空白了吗？我可以编写一个纯CSS布局，使这些框填充1下方的空间吗？我看到了一些灵​​活框解决方案，但它们似乎可以使用固定的一组列，理想情况下，我只想在布局中传递框1-6，并且它们可以正确调整。现代CSS有可能吗？我没有浏览器限制，可以使用任何现代功能！

Answer 1

不幸的是，您无法使用flexbox做到这一点，而且我认为网格布局也无法做到这一点。 Pure CSS masonry layout is highly expected, but not yet available.

我看到两种解决方案：

1。 使用外部包装。我建议react-grid-layout使用JS来控制孩子的position: absolute和transform: translate的值。它支持调整大小和许多其他功能。在您的情况下，它应该可以正常工作。

2。 您还可以使用some tiny JS（不是我的笔）：

Answer 2

@staypuftman在评论中指出使用CSS网格，我完成了我想做的事情。这是我的代码：

在容器上：

display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-gap: 15px;
height: 100vh;

我要做的是使用网格布局，通过在grid-template-columns中写1fr 8次并在fr属性中使用12个grid-template-rows写12行来创建8列。另外，我为每个项目之间的间距设置了grid-gap，并将高度设置为100vh，以使网格覆盖整个可见空间。

现在在我的物品中，我这样做：

grid-column-end: span 2;
grid-row-end: span 2;

grid-column-end: span X告诉浏览器将该项目扩展到我的2列中（我创建了8列），关于grid-row-end行的内容也是如此。

这是结果：