使用Tailwind CSS的砌砖布局

Example of a masonry layout made of pictures

Let me get straight to the point: making a true masonry layout where items line up horizontally requires JavaScript. But using only CSS, we can get a similar look with things stacked vertically.

让我直截了当地说：创建真正的砌体布局，使项目水平对齐需要使用JavaScript。但只使用CSS，我们可以通过垂直堆叠的方式获得类似的外观。

So, we end up with a kind of fake masonry layout, which is fine if the order of things isn’t super important. Nothing against JavaScript; sometimes it’s just easier to keep things simple and not add extra stuff to your project.

因此，我们得到了一种伪砌体布局，如果事物的顺序不是非常重要，那就没问题。并不是反对JavaScript；有时候，保持简单并不添加额外内容到项目中更容易。

We will follow two different approaches to make the masonry layout with Tailwind CSS:

我们将采用两种不同的方法来使用Tailwind CSS创建砌体布局：

One based on the simple use of CSS grids.
一种基于简单使用CSS网格的方法。
The other uses CSS columns and has a much lighter structure.
另一种方法使用CSS列，结构更轻。

Both ways work well, pick whichever you prefer!

这两种方法都很好，选择你喜欢的即可！

Masonry layout with CSS grids

CSS网格的砌体布局

<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<!-- Column #1 -->
<div class="grid gap-4">
<div>
<img class="w-full rounded-xl shadow" src="./masonry-01.jpg" width="232" height="290" alt="Image 01" />
</div>
<div>
<img class="w-full rounded-xl shadow" src="./masonry-02.jpg" width="232" height="290" alt="Image 02" />
</div>
<div>
<img class="w-full rounded-xl shadow" src="./masonry-03.jpg" width="232" height="174" alt="Image 03" />
</div>
</div> 
<!-- Column #2 -->
<div class="grid gap-4">
<div>
<img class="w-full rounded-xl shadow" src="./masonry-04.jpg" width="232" height="155" alt="Image 04" />
</div>
<div>
<img class="w-full rounded-xl shadow" src="./masonry-05.jpg" width="232" height="349" alt="Image 05" />
</div>
<div>
<img class="w-full rounded-xl shadow" src="./masonry-06.jpg" width="232" height="250" alt="Image 06" />
</div>
</div>
<!-- Column #3 -->
<div class="grid gap-4">
<div>
<img class="w-full rounded-xl shadow" src="./masonry-07.jpg" width="232" height="349" alt="Image 07" />
</div>
<div>
<img class="w-full rounded-xl shadow" src="./masonry-08.jpg" w...