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.
2 min read·13 Jul 2022
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 👋🏻
Bergabunglah dengan 23.000+ lainnya dan jangan pernah ketinggalan screencast, tips, tutorial, dan lainnya.
Baca artikel lain yang mungkin menarik untuk Anda. Atau, Anda bisa mencari artikel lainnya di halaman artikel.