css - 使用 flexbox(或其他 CSS)创建 Masonry 网格

Question

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

我尝试使用 float ，但是那个错误。所以我尝试使用 Flex，但它仍然无法满足我的要求。

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

我想要什么:

我有什么:

Answer 1

尝试新的 CSS Grid Layout :

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 demo

---

工作原理:

1. Establish a block-level grid container.
2. grid-auto-rows属性设置自动生成的行的高度。在此网格中，每行高 50 像素。
3. grid-gap property 是 grid-column-gap 和 grid-row-gap 的简写。此规则在 网格项之间设置了 10 像素的间距。 (不适用于元素与容器之间的区域。)

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

   repeat符号定义重复列(或行)的模式。

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

   minmax()函数为每列(或行)设置最小和最大大小范围。在上面的代码中，每列的宽度最小为容器的 30%，最大为可用空间的宽度。

   fr unit表示网格容器中可用空间的一部分。它相当于 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