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

我想在CSS中实现网格效果,其中元素的大小都相同但高度不同.我希望下面的元素总是在底部的50px,无论下一个是什么.

我试过浮子,但那个错误.所以我尝试使用Flex,但它仍然没有做我想要的.

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

我想要的是什么：

是)我有的：

解决方法

试试新的 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属性设置自动生成的行的高度.在这个网格中,每行高50px.
> grid-gap属性是网格 – 列间隙和网格 – 行间隙的简写.此规则在网格项之间设置10px的间隙. (它不适用于物品和容器之间的区域.)
> grid-template-columns属性设置显式定义列的宽度.

repeat表示法定义了重复列(或行)的模式.

auto-fill函数告诉网格尽可能多的列(或行)排列而不会溢出容器. (这可以创建与flex布局的flex-wrap：wrap相似的行为.)

minmax()函数为每列(或行)设置最小和最大尺寸范围.在上面的代码中,每列的宽度至少为容器的30％,并且最大可用空间.

fr unit表示网格容器中可用空间的一小部分.它与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 – 不支持当前规范;支持过时的版本

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

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

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

解决方法

相关文章