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

Question

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

我尝试使用浮点数，但该错误。因此，我尝试使用Flex，但是它仍然无法满足我的要求。

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

Answer 1

Try the new 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>

建立一个块级网格容器。该grid-auto-rows属性设置自动生成的行的高度。在此网格中，每行高度为50px。
该grid-gap属性是一个速记grid-column-gap和grid-row-gap。此规则在网格项目之间设置10px的间距。（不适用于物品和容器之间的区域。）该grid-template-columns属性设置显式定义的列的宽度。该符号定义重复列（或行）的模式。reeat

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

flex-wrap: wrap

该minmax()函数为每列（或行）设置最小和最大大小范围。在上面的代码中，每列的宽度最小为容器的30％，最大为
可用的可用空间。的fr单元表示在网格容器中的自由空间的一小部分。相当于flexbox的flex-grow属性。

使用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-不支持当前规范；支持过时的版本
这是完整的图片：

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