多列布局中的内容使用所有列

Question

我正在为此布局使用 CSS多列布局：

我希望内容使用尽可能多的列。它在上图中这样做，但是当只有 3 个项目时，它会执行以下操作：

我希望方框“3”位于方框“2”的右侧。那可能吗？

编辑：寻找通用解决方案（这是一个简化示例，我们事先不知道容器或元素的高度）。

编辑 2：如果有比使用多列（也许是网格？）更好的方法，我们会使用它。

这是 HTML/CSS（或这里的jsfiddle ）：

.container {
  column-width: 120px;
  column-gap: 20px;
  padding: 10px;
  width: 600px;
  height: 250px;
  border: 1px solid blue;
}

.item {
  
  background: #2371f3;
  padding: 5px;
  height: 100px;
  width: 100px;
  color: white;
  break-inside: avoid;
  /* Workaround for Firefox bug (https://stackoverflow.com/a/7785711/2223706) */
  overflow: hidden;
  border: 1px solid darkblue;
}

.longer {
  height: 220px; /* Decreasing this to 200px makes #2 and #3 no longer stack. */
}

<div class="container">
  <div class="item longer">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Answer 1

如果元素数量有限，你可以编写一些特定的CSS来做到这一点

.container {
  column-width: 120px;
  column-gap: 20px;
  padding: 10px;
  width: 600px;
  height: 200px;
  border: 1px solid blue;
}

.item {
  background: #2371f3;
  padding: 5px;
  height: 100px;
  width: 100px;
  color: white;
  display: inline-block;
  vertical-align: top;
  box-sizing:border-box;
  overflow: hidden;
  border: 1px solid darkblue;
}

/* we add some bottom margin to push the next element */
.item:nth-last-child(2):nth-child(even):not(:nth-child(6)),
.item:nth-last-child(3):nth-child(2),
.item:nth-last-child(2):nth-child(3){
  background: red;
  margin-bottom: 5px; /* any value from 1px to 50px can do the job */
}
/**/
.longer {
  height: 200px;
}

<div class="container">
  <div class="item longer">1</div>
  <div class="item">2</div>
</div>

<div class="container">
  <div class="item longer">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div class="container">
  <div class="item longer">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<div class="container">
  <div class="item longer">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<div class="container">
  <div class="item longer">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

<div class="container">
  <div class="item longer">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>