用flexbox(或其他CSS)创建一个砌体网格

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