实践练习1： 瀑布流（栅布局）

目标：

• 使用grid来建立页面栅布局
• 不指定元素以及容器的高度，容器内部所有元素都能够自适应大小，并且自动排列
• 元素两侧的空白是均匀的。

---

主要部分：

一） #grid容器：

display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px,1fr));    /* 1 */
grid-auto-rows: 5px;               /* 2 */
grid-auto-flow: row dense;		   /* 3 row dense会填充空白 */
grid-gap:23px;		              /* 4 */
复制代码

1. 设置列的宽度为最小为280px；其重复次数自适应（使用auto-fit，抑或auto-fill关键字）
2. 栅中，行高固定为5px
3. 使用grid-auto-flow来设置元素的排列方式，即按水平方向布局，在有必要时才会发生换行。
4. 设置网格的周围距离。

二） .grid-item 网格项目

grid-column: auto / span 1;      /* 1 */
position: relative;            
复制代码

此处使用grid-column来固定元素的列跨度， / 的左侧是列的起点，右侧是列跨度。 注意：网格项目的行跨度会在脚本中设置。

三） 网格项目的高度（即行跨度）

var h = Math.floor(height / 5) % 23; /* 重点在%23 */
el.style.gridRow = 'auto / span ' + (h>=7?h:h+7) ;
复制代码

height是随机高度；h则是根据height生成的span数。

在以上CSS中，使用grid-auto-rows定义了行高，grid-gap定义了网格之间的间距； 那么就能得到： 元素实际高度 = h * grid-auto-rows + (h-1) * grid-gap。 首先，将元素实际高度限制在170px到590px之间，就能得到h的范围是 7 - 22 .

在上面的代码中， %23保证了h必须是22以内的整数。 而(h>=7?h:h+7)则保证了h必须要大于或等于7.

预览：

1：

2：

写在最后：

• 这是小生系统学习前端知识后的一些实践练习，其中大多是自己的理解，还请各位批评指正。
• 完整的代码链接（Codepen）： P1瀑布流

转载于:https://juejin.im/post/5ccaea57e51d453b4558d824