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

Question

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

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

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

我想要什么：

我有：

Answer 1

我建议您将每一列放在单独的 div 中。这样 flexbox 就不会强迫它进入类似 table 的布局。

即使我在代码片段中使用了固定高度，它也应该可以动态工作而不会出现任何问题

.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>

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

试试新的 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

工作原理：

Establish a block-level grid container.
grid-auto-rows 属性设置自动生成行的高度。在此网格中，每行高 50 像素。
grid-gap 属性是 grid-column-gap 和 grid-row-gap 的 shorthand。此规则在个网格项之间设置了一个 10 像素的间距。（它不适用于项目和容器之间的区域。）

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

repeat 表示法定义了重复列（或行）的模式。

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

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

fr unit 表示网格容器中空闲 space 的一小部分。它与 flexbox 的 flex-grow 属性.
相当
使用 grid-row and 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

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

Create a Masonry grid with flexbox (or other CSS)

css

multiple-columns

flexbox

css-grid

jsFiddle demo