CSS Masonry Layout Dengan Tailwind CSS

Dalam artikel ini kita akan belajar bagaimana membuat grid seperti pinteres dengan tailwind css. Awalnya saya berfikir tentang ini karena ingin membuat tampilan daftar isi buku yang saya tulis persis seperti tampilan pinterest. Maka oleh karena itu, saya tertarik untuk menuliskannya di sini karena mungkin kalian juga membutuhkan nya.

Berikut ini adalah markup bagaimana menggunakan teknik mansory dengan tailwind css.

1<div class="columns-1 sm:columns-2 md:columns-3 gap-10">
2    <div class="break-inside-avoid bg-rose-500 p-10">
3        lorem20
4    </div>
5    <div class="break-inside-avoid bg-gray-500 p-10">
6        lorem10
7    </div>
8    <div class="break-inside-avoid bg-blue-500 p-10">
9        lorem30
10    </div>
11    <div class="break-inside-avoid bg-rose-500 p-10">
12        lorem30
13    </div>
14    <div class="break-inside-avoid bg-gray-500 p-10">
15        lorem20
16    </div>
17    <div class="break-inside-avoid bg-blue-500 p-10">
18        lorem120
19    </div>
20    <div class="break-inside-avoid bg-rose-500 p-10">
21        lorem90
22    </div>
23    <div class="break-inside-avoid bg-gray-500 p-10">
24        lorem302
25    </div>
26    <div class="break-inside-avoid bg-blue-500 p-10">
27        lorem31
28    </div>
29</div>
30
htmlCopy

Jika Anda memakai vscode, harusnya ada emmet by default sehingga Anda bauat lorem{x} maka akan tergenerasi isinya. Semoga bermanfaat, until next time 👋🏻