主页/前端笔记/CSS笔记/在纯CSS中创建瀑布流布局

在纯CSS中创建瀑布流布局

在纯CSS中创建瀑布流布局(Masonry Layout)一直是前端开发者追求的目标之一。这种布局方式可以追溯到CSS 3时期,尽管它并非像“圣杯布局”那样早已有了完善的解决方案。如今,随着CSS网格(CSS Grid)的普及,我们已经能够实现许多复杂的布局,但瀑布流布局依然需要特别的处理方法。

最初,Dave DeSandro通过其Masonry.js工具推广了这一布局风格,并在Beyoncé的网站上实现了应用,极大地提升了它的知名度。由于Pinterest从一开始就采用了类似的布局设计,因此有时也会听到人们将瀑布流布局称为“Pinterest风格”的布局。

虽然使用Flexbox或Grid可以在某些理想条件下近似实现瀑布流效果,但这些方法并不是为瀑布流布局专门设计的。考虑到瀑布流布局长期以来的广泛应用和需求,它理应在CSS规范中占有一席之地。实际上,早在2020年Rachel Andrew就提出了将瀑布流作为网格的一个子功能的概念。

到了2022年,CSS Masonry被纳入了CSS Grid布局模块第3版的编辑草案中。然而,在推进过程中遇到了一些挑战,比如关于如何调整列轨道大小以及与网格布局算法的关系问题。传统的网格布局首先放置所有项目,然后根据项目大小调整行/列尺寸;而瀑布流布局则要求先设定好行/列尺寸,再在这些行/列内放置项目。这就导致了现有的规范逻辑在内在尺寸调整方面表现不佳,特别是在自适应尺寸的情况下。

此外,对于瀑布流是否应该成为独立于网格布局之外的功能,社区内也存在不同的看法。一方面,有人认为将其作为网格的一部分可以利用现有的强大特性,如子网格(subgrids),这对于构建连贯的设计非常有用。另一方面,也有观点指出这样做可能会增加学习成本,因为开发者需要理解两种不同的布局机制。

最终,围绕CSS瀑布流有两种主要的竞争提案:一种是将其视为网格布局的一部分,另一种则是作为一个独立的显示模式。每种方案都有其优点和潜在挑战,具体选择取决于优先考虑的是现有布局特性的利用还是新方法的简洁性和易用性。无论最终达成哪种共识,目标都是为了提供一个更加强大且易于使用的解决方案来满足现代网页设计的需求。