使用Tailwind CSS的砌砖布局
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...