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.

1 min read

Published on 13 Jul, 2022 (updated: 25 Oct, 2022)

Written by Irsyad A. Panjaitan

Fill in CSSTailwind CSS

ArticlesCSS 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>
htmlCopy

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