在 CSS 中以不同高度布置元素在三列中

Question

我想在 CSS 中布局一些元素，这些元素在三列或四列中垂直“流动”，如下所示：

布局应将元素尽可能均匀地放置在列中。

由于垂直网格线，普通的网格布局不起作用，并且 Flexbox 似乎没有提供任何其列流方向的信息。

有人知道布局这样的元素的好方法吗？

Answer 1

答案取决于您希望元素显示的顺序。

如果您喜欢第 1 列从上到下、第 2 列从上到下、第 3 列从上到下的顺序，那么您可以使用 CSS 经常被忽视的多列布局。只需用

columns: 3

设计包装纸即可。

let s = ''
for (let i = 0; i < 20; i++) {
  const hue = Math.floor(Math.random() * 256)
  const height = Math.floor(Math.random() * 100) + 25
  s += `<div style="border-color: hsl(${hue}, 100%, 50%); height: ${height}px;">${i + 1}</div>`
}
document.querySelector('body').innerHTML = s

body {
  margin: 1em;
  columns: 3;
}

div {
  border: 5px solid black;
  margin-bottom: 1em;
  break-inside: avoid;
}

如果您希望前三个元素显示在第 1、2 和 3 列的顶部，然后元素 4 显示在最短的列中，那么这就是 masonry 布局。 CSS 正在研究对此的直接支持，但与此同时，您可以尝试各种技术。