瀑布流布局Grid

Grid

Grid将是布局当中的一把利剑，也可以说是神器，特别是今年得到了众多浏览器的支持。记得去年在CSSConf分享后，有同学问我Grid是否能实现瀑布流的布局。说实话，虽然Grid对于布局而言是非常的强大，但要很好的实现瀑布流布局还是非常的蛋疼。@Rachel Andrew在她分享的文章中也特意提到过实现瀑布流的方案。从文章中摘出有关于瀑布流布局的那部分内容。

Grid制作瀑布流，对于结构而言和Multi-columns示例中的一样。只不过在.masonry使用display:grid来进行声明：

.masonry {
    display: grid;
    grid-gap: 40px;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(50px, auto);
}

对于.item较为蛋疼，需要分别通过grid-row和grid-column来指定列表项目所在的区域，比如：

.masonry > div:nth-child(1) {
    grid-row: 1 / 4;
    grid-column: 1;
}

.masonry > div:nth-child(2) {
    grid-row: 1 / 3;
    grid-column: 2;
}
...

将效果Fork过来：

<iframe id="XRJEqO" src="https://codepen.io/airen/embed/XRJEqO?height=400&theme-id=0&slug-hash=XRJEqO&default-tab=result&user=airen" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="box-sizing: inherit; width: 940px; overflow: hidden;"></iframe>

在Grid中有自动排列的算法的属性：

• 如果没有明确指定网格项目位置，网格会按自动排列算法，将它最大化利用可用空间
• 如果在当前行没有可用位置，网格会自动搜索下一行，这样会造成一定的差距，浪费可用空间
• 可以把grid-auto-flow的row值改变auto，可以切换搜索顺序
• grid-auto-flow还可以接受另一个关键词。默认情况下，其值是sparse，但我们可以将其显式的设置为dense，让网格项目试图自动填补所有可用的空白空间

言外之意，Grid中自动排列的算法对于实现瀑布流布局有很大的帮助。不过对于堆栈（列表项目）高度不能友好的控制。

总结

这篇文章主要介绍了如何使用纯CSS实现瀑布流的布局。文章简单介绍了三种实现方案：Multi-columns、Flexbox和Grid。从上面的示例或者实现手段而言，较我友好的是Flexbox的方案。当然，随着CSS Grid特性的完善，使用Grid实现瀑布流布局将会变得更为简单和友好。那让我们拭目以待。当然如果你觉得这些方案都不太好，你可以依旧可以考虑JavaScript的解决方案。如果你有更好的解决方案，也希望能在下面的评论中与我们一起分享。

以上摘自大漠