Parsinta

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>

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

CSS Masonry Layout Dengan Tailwind CSS

Irsyad A. Panjaitan

Irsyad A. Panjaitan

Follow me on

Support me

Newsletter

Artikel Terkait