没有定义列的纯 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 正下方的空间吗？我看到了一些 flex-box 解决方案，但它们似乎适用于一组固定的列，理想情况下我只想在布局中传递框 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 次来创建 8 列，并在 grid-template-rows 属性中使用 12 个frs 创建 12 行。我还设置了grid-gap 用于每个项目之间的间距和 100vh 的高度，以使我的网格跨越整个可见空间。

现在在我的项目中我这样做：

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

grid-column-end: span X 告诉浏览器将项目跨越我的 2 列（其中我创建了 8 列），对于 grid-row-end 的行也是如此。

这是结果：