div 垂直对齐的流体布局

Question

我有一个由具有相同宽度但不同高度的 div 组成的流体布局。

我的目标（当我调整屏幕大小时）是强制任何 div 在左侧对齐。

有一个（希望如此）清晰的例子：

.container {
  border:1px solid silver;
  float:left;
  margin:5px;
  border-radius:10px;
  text-align:center;
}

<div class='container' style='width:100px; height:120px;'>1</div>
<div class='container' style='width:100px; height:100px;'>2</div>
<div class='container' style='width:100px; height:130px;'>3</div>
<div class='container' style='width:100px; height:90px;'>4</div>
<div class='container' style='width:100px; height:100px;'>5</div>
<div class='container' style='width:100px; height:105px;'>6</div>
<div class='container' style='width:100px; height:95px;'>7</div>
<div class='container' style='width:100px; height:80px;'>8</div>
<div class='container' style='width:100px; height:75px;'>9</div>
<div class='container' style='width:100px; height:140px;'>10</div>

使用默认屏幕尺寸我得到这个：

但我的目标是 DIV #7、#8 和 #9 将位于 div #1、#2、#3 下

或者使用拉伸的屏幕尺寸，我会得到这样的结果：

但我的目标是避免 div #1 和 #4 或 #2 和 #5 之间出现空白。

无论上面的尺寸如何，我应该使用哪个 CSS 属性来垂直对齐 div？ 我必须使用 Flexbox 来代替吗？

Answer 1

我认为使用 css grid 将是实现你想要的最简单的方法，像这样的东西应该可以满足你的要求：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  gap: 5px;
  justify-items: stretch;
}

.container {
  border:1px solid silver;
  border-radius:10px;
  text-align:center;
}

<div class="grid">
  <div class='container' style='min-height:120px;'>1</div>
  <div class='container' style='min-height:100px;'>2</div>
  <div class='container' style='min-height:130px;'>3</div>
  <div class='container' style='min-height:90px;'>4</div>
  <div class='container' style='min-height:100px;'>5</div>
  <div class='container' style='min-height:105px;'>6</div>
  <div class='container' style='min-height:95px;'>7</div>
  <div class='container' style='min-height:80px;'>8</div>
  <div class='container' style='min-height:75px;'>9</div>
  <div class='container' style='min-height:140px;'>10</div>
</div>