css - 使用 flexbox（或其他 CSS）创建 Masonry 网格

Question

我想在 CSS 中实现网格效果，元素的宽度都相同，但高度不同。我希望下面的元素始终位于底部元素的 50px 处，无论接下来是什么。

我试过用花车，但那个错误。所以我尝试使用 Flex，但它仍然没有达到我想要的效果。

.container
  display: flex
  flex-wrap wrap
  align-content flex-start
  align-items flex-start

我想要什么：

我有的：

Answer 1

尝试新的CSS 网格布局：

grid-container {
  display: grid;                                                /* 1 */
  grid-auto-rows: 50px;                                         /* 2 */
  grid-gap: 10px;                                               /* 3 */
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */
}

[short] {
  grid-row: span 1;                                             /* 5 */
  background-color: green;
}

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}

<grid-container>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

jsFiddle 演示

---

这个怎么运作：

1. 建立块级网格容器。
2. 该grid-auto-rows属性设置自动生成的行的高度。在这个网格中，每一行都是 50px 高。
3. 该grid-gap属性是grid-column-gap和的简写grid-row-gap。此规则在网格项目之间设置 10px 的间隙。（不适用于物品和容器之间的区域。）

4. 该grid-template-columns属性设置明确定义的列的宽度。

   该repeat符号定义了重复列（或行）的模式。

   该auto-fill函数告诉网格在不溢出容器的情况下排列尽可能多的列（或行）。（这可以创建类似于 flex 布局的行为flex-wrap: wrap。）

   该minmax()函数为每列（或行）设置最小和最大大小范围。在上面的代码中，每列的宽度至少是容器的 30%，并且是任何可用空间的最大值。

   该fr单位表示网格容器中可用空间的一小部分。它可以与 flexbox 的flex-grow属性相媲美。

5. 我们告诉网格项目它们应该跨越多少grid-row行。span

---

浏览器对 CSS 网格的支持

• Chrome - 自 2017 年 3 月 8 日起全面支持（版本 57）
• Firefox - 自 2017 年 3 月 6 日起全面支持（版本 52）
• Safari - 自 2017 年 3 月 26 日起全面支持（版本 10.1）
• Edge - 自 2017 年 10 月 16 日起提供全面支持（版本 16）
• IE11 - 不支持当前规范；支持过时的版本

这是完整的图片：http ://caniuse.com/#search=grid

---

Firefox 中很酷的网格覆盖功能：在 Firefox 开发工具中，当您检查网格容器时，CSS 声明中有一个小网格图标。单击它会在页面上显示网格的轮廓。

更多详细信息：https ://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

Answer 2

我会建议列布局。column-width通过同时声明和 ，它可以很容易地响应您的喜好column-count。与 Emonadeo 的解决方案相比（没有冒犯）的好处是它仍然保持响应，而无需添加任何额外的标记。缺点是，元素首先被排序为列，而不是行。

.container {
   /* min width of a single column */
   column-width: 140px;
   /* maximum amount of columns */
   column-count: 4;
   /* gap between the columns */
   column-gap: 16px;
}


.container div {
  /* important so a single div never gets distributed between columns */
  break-inside: avoid-column;

  background-color: #2C2F33;
  margin-bottom: 16px;
  color:white;
}

<div class="container">
    <div style="height: 200px">a</div>
    <div style="height: 100px">b</div>
    <div style="height: 200px">c</div>
    <div style="height: 150px">d</div>
    <div style="height: 250px">e</div>
    <div style="height: 200px">f</div>
    <div style="height: 300px">g</div>
    <div style="height: 150px">h</div>
    <div style="height: 100px">i</div>
</div>

Answer 3

我建议你把每一列放在一个单独的div. 这样 flexbox 就不会强迫它变成类似表格的布局。

即使我在片段中使用了固定高度，它也应该可以动态工作而没有任何问题

.container {
  display: flex;
}

.col {
  flex: 1;
}

.col div {
  background-color: #2C2F33;
  margin: 16px 8px;
}

<div class="container">
  <div class="col">
    <div style="height: 200px"></div>
    <div style="height: 100px"></div>
    <div style="height: 200px"></div>
  </div>
  <div class="col">
    <div style="height: 150px"></div>
    <div style="height: 250px"></div>
    <div style="height: 200px"></div>
  </div>
  <div class="col">
    <div style="height: 300px"></div>
    <div style="height: 150px"></div>
    <div style="height: 100px"></div>
  </div>
</div>