小编典典

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

css

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

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

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

阅读 371

收藏
2020-05-16

共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声明中有一个微小的网格图标。
单击时,它会在页面上显示网格的轮廓。

2020-05-16