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.
Share
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.
<div class="columns-1 sm:columns-2 md:columns-3 gap-10"> <div class="break-inside-avoid bg-rose-500 p-10"> lorem20 </div> <div class="break-inside-avoid bg-gray-500 p-10"> lorem10 </div> <div class="break-inside-avoid bg-blue-500 p-10"> lorem30 </div> <div class="break-inside-avoid bg-rose-500 p-10"> lorem30 </div> <div class="break-inside-avoid bg-gray-500 p-10"> lorem20 </div> <div class="break-inside-avoid bg-blue-500 p-10"> lorem120 </div> <div class="break-inside-avoid bg-rose-500 p-10"> lorem90 </div> <div class="break-inside-avoid bg-gray-500 p-10"> lorem302 </div> <div class="break-inside-avoid bg-blue-500 p-10"> lorem31 </div> </div>
htmlCopy
Jika Anda memakai vscode, harusnya ada emmet by default sehingga Anda bauat lorem{x} maka akan tergenerasi isinya. Semoga bermanfaat, until next time 👋🏻