使用Tailwind CSS的砌砖布局

Example of a masonry layout made of pictures

Live Demo Download

演示 下载

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...
开通本站会员,查看完整译文。

trang chủ - Wiki
Copyright © 2011-2024 iteam. Current version is 2.137.1. UTC+08:00, 2024-11-05 23:22
浙ICP备14020137号-1 $bản đồ khách truy cập$