使用Tailwind CSS列的砖石结构布局
It's 2022, how would you implement a masonry layout that looks like this? Back in the day, we'd have to use a JavaScript library, but today it's a lot easier (especially with Tailwind)...
这是2022年，你会如何实现一个看起来像这样的砖石结构布局？在过去，我们必须使用一个JavaScript库，但今天，这要容易得多（特别是在Tailwind）...
Masonry layout by Ann in Figma
安在Figma中的砌体布局
Tailwind Masonry
尾风泥瓦匠公司
If you're looking for a quick answer, in short, masonry layouts can be made with minimum code using Tailwind CSS. Maybe this is obvious to some people, but with a sprinkle of Tailwind utility classes, you can have a nice flowing grid really quickly. To code the above design, I literally copied this example from Tailwind's docs:
如果你正在寻找一个快速的答案，简而言之，使用Tailwind CSS，可以用最少的代码做出砌体布局。也许这对某些人来说是显而易见的，但只要撒上一点Tailwind的实用类，你就可以很快拥有一个漂亮的流动的网格。为了编写上述设计的代码，我从Tailwind的文档中复制了这个例子。
Tailwind masonry example
尾风砌体的例子
I was blown away that it's just pure CSS. Here's a Tailwind play pen, showing that you just need a couple of classes:
我被震惊了，它只是纯粹的CSS。这里有一个Tailwind的游戏笔，显示你只需要几个类。
-
'columns-3' – create 3 columns
'columns-3' - 创建3个列
-
'gap-8' – the gutter between the columns
'gap-8'- 列之间的缝隙
CSS Columns
CSS列
If you inspect the 'columns-3' Tailwind class used in the example code, you'll see that it acts as shorthand for 'CSS columns' - a property that's about as old as flexbox:
如果你检查示例代码中使用的'columns-3'Tailwind类，你会发现它是'CSS列'的缩写--一个和flexbox一样古老的属性。
The CSS columns property is about as old as flexbox, but it never got the praise of its cooler sibling, since flexbox was such a revolution in web layout. – Tobias Thorin
CSS列属性的历史和flexbox一样长，但它从来没有得到它的兄弟姐妹那样的赞誉，因为flexbox是网页布局的一场革命。-Tobias Thorin
As Tobias highlights in his article 'CSS Columns, an underrated layout tool?', CSS Columns are awesome for creating masonry layouts. That's what I've found anyway, as demonstrated by the outcome on the Prototypr homepage:
正如Tobias在他的文章《CSS列，一个被低估的布局工具？中所强调的，CSS Columns对于创建砖石结构的布局是非常棒的。这就是我所发现的，正如Prototypr主页上的结果所显示的那样。
Prototypr homepage masonry layout
Prototypr主页的砖石结构布局
Here is a Gi...