纯CSS实现 - 瀑布流Grid栅格 ，抛砖引玉，欢迎思维发散

朋友们，一起用 grid 做个瀑布流吧

纯CSS实现 - 瀑布流栅格

用flex实现的栅格系统会碰到这种样式

瀑布流栅格 期望的是这种效果

瀑布流栅格代码

css片段

.masonry {
    display: grid; 
    grid-gap:10px; // 设置行列间距
    grid-auto-rows: 30px; //这里设定默认行高
}

/* 简单的子模块样式 */
.masonry > div {
    background:blue;
    color: #FFFFFF;
    width: 100%;
}

/* 添加一个自定义的属性，做一个可配置的列数设置 */
[class^='masonry'][data-column='1'] {
    grid-template-columns: repeat(1, 1fr);
}

[class^='masonry'][data-column='2'] {
    grid-template-columns: repeat(2, 1fr);
}

[class^='masonry'][data-column='3'] {
    grid-template-columns: repeat(3, 1fr);
}

/* 添加一个自定义的属性， 做一个可配置的行高设置 */
[class^='masonry'] > div[data-row='1'] {
    grid-row: auto / span 1;
}
[class^='masonry'] > div[data-row='2'] {
    grid-row: auto / span 2;
}
[class^='masonry'] > div[data-row='3'] {
    grid-row: auto / span 3;
}

html代码

/* data-column 用于配置列数   data-row用于设置所占行数 */
<div class="masonry" data-column="3">
    <div class="item"  data-row="2">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item"  data-row="2">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>

这个简单的瀑布流 是不是你所期待的样子

图片瀑布流布局（ css + 简单js实现 ）

代码片段

主要属性介绍

grid 属性：这段代码的核心属性，css的网格容器。这里就贴个浏览器支持，其他具体信息 给个链接，就不复制粘贴了。

使用：display: grid;

grid-gap：设置网格行列之间的间隙。包含 row-gap 和 column-gap;

使用：grid-gap: 20px 50px;

grid-auto-rows：设置网格容器中行的默认大小。（ 设置每行的默认高度 ）

使用：grid-auto-rows: 10px;

grid-row：属性定义了网格元素行的开始和结束位置。（ grid-row 是 grid-row-start 和 grid-row-end 属性的简写属性。 ）

使用：grid-rows: 1 / span 1;

grid-row-start：1； //从哪一行开始

grid-row-end：span 1； // 占多少行

grid-template-columns: 设置网格布局中的列数及宽度。

使用：grid-template-columns: repeat(3, 1fr);