目标:
- 使用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 */
复制代码
- 设置列的宽度为最小为280px;其重复次数自适应(使用auto-fit,抑或auto-fill关键字)
- 栅中,行高固定为5px
- 使用grid-auto-flow来设置元素的排列方式,即按水平方向布局,在有必要时才会发生换行。
- 设置网格的周围距离。
二) .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瀑布流