Belajar Laravel Lebih Dari Sekedar Fundamental

13 July by Irsyad A. Panjaitan

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.

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 👋🏻

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.
0

Share on

Parsinta is a online learning platform intended for web developers.Through series-series such as Laravel, Reactjs, Vuejs, InertiaJs, HTML, Bootstrap, Tailwind CSS, and more.

Parsinta is a Trademark of Irsyad A. Panjaitan. Copyright © 2016 - 2022