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.

    Irsyad A. Panjaitan

    2 min readยท13 Jul 2022

    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.

    <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 ๐Ÿ‘‹๐Ÿป

    Karteil
    Destinasi Utama Belajar Online dengan Format Tulisan yang Elegan
    Kunjungi Sekarang

    Irsyad A. Panjaitan

    Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.

    Follow me on
    Support me
    SaweriaGithub

    Newsletter

    Bergabunglah dengan 23.000+ lainnya dan jangan pernah ketinggalan screencast, tips, tutorial, dan lainnya.