使用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)...

A masonry layout example, with images arranged in a

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的文档中复制了这个例子

Screenshot of Tailwind's masonry example from their website

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'- 列之间的缝隙

Screenshot of Tailwind Play code example. The left shows the code, the right panel shows the masonry layout.

Tailwind play masonry example

尾风游戏的砌体例子

divider.png

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主页上的结果所显示的那样。

Screenshot from Prototypr homepage showing the masonry layout created with Tailwind CSS

Prototypr homepage masonry layout

Prototypr主页的砖石结构布局

Here is a Gi...

开通本站会员,查看完整译文。

Home - Wiki
Copyright © 2011-2024 iteam. Current version is 2.139.0. UTC+08:00, 2024-12-23 00:11
浙ICP备14020137号-1 $Map of visitor$