Understanding the Grid System Tailwind CSS – Hi bret kali ini saya akan membahas kelanjutan materi pada tailwind css tentang Apa itu sistem grid, Cara menggunakan sistem grid di Tailwind CSS dan Cara membuat layout responsif menggunakan sistem grid.
Apa itu sistem grid pada Tailwind CSS ?
Grid System Tailwind CSS adalah fitur untuk membuat layout pada website secara mudah dan cepat menggunakan grid system. Grid system pada Tailwind CSS menggunakan pendekatan “mobile-first”, yang artinya grid system tersebut di rancang untuk mendukung desain responsif pada perangkat mobile dan desktop.
Grid System Tailwind CSS terdiri dari class CSS yang telah disiapkan dengan baik, seperti class untuk menentukan ukuran kolom, margin, dan padding. Kita bisa menggabungkan class tersebut untuk membuat layout yang kompleks dengan mudah.
Contoh penggunaan sistem grid pada Tailwind CSS adalah sebagai berikut:
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-100 p-4">Kolom 1</div>
<div class="bg-gray-200 p-4">Kolom 2</div>
<div class="bg-gray-300 p-4">Kolom 3</div>
<div class="bg-gray-400 p-4">Kolom 4</div>
<div class="bg-gray-500 p-4">Kolom 5</div>
<div class="bg-gray-600 p-4">Kolom 6</div>
</div>Pada contoh di atas, kita membuat grid dengan tiga kolom pada layar besar (lg) dan dua kolom pada layar medium (md) atau kecil. Kita juga menambahkan jarak antar elemen dengan menggunakan class gap-4. Setiap kolom memiliki background berbeda untuk membedakan antar kolom.
Dengan sistem grid pada Tailwind CSS, kita bisa membuat layout website yang responsif dan mudah dibaca pada berbagai ukuran layar. Kita juga tidak perlu menulis kode CSS dari awal, karena class CSS yang dibutuhkan sudah di sediakan secara default pada Tailwind CSS.
Cara menggunakan sistem grid di Tailwind CSS
- Pertama kalian bisa memulai dengan menambahkan class “grid” pada elemen induk (parent element) yang akan dijadikan sebagai container untuk sistem grid. Contoh:
<div class="grid grid-cols-3 gap-4">
<!-- Konten di sini -->
</div>2. Pada contoh di atas, class “grid-cols-3” artinya bahwa sistem grid akan terdiri dari 3 kolom. kalian bisa mengganti angka “3” dengan jumlah kolom yang inginkan. Sedangkan class “gap-4” artinya bahwa ada jarak 4 piksel antara setiap elemen di dalam sistem grid. kalian bisa mengganti angka “4” dengan jumlah jarak yang yang inginkan.
3. Setelah itu, kalian bisa menambahkan class “col-span-x” pada elemen anak (child element) untuk menentukan jumlah kolom yang akan ditempati oleh elemen tersebut. Contoh:
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2">Kolom 1-2</div>
<div class="col-span-1">Kolom 3</div>
</div>4. Pada contoh di atas, elemen pertama akan menempati 2 kolom, sedangkan elemen kedua hanya 1 kolom.
5. kalian juga bisa menambahkan class “row-span-x” untuk menentukan jumlah baris yang akan ditempati oleh elemen. Contoh:
<div class="grid grid-cols-3 gap-4">
<div class="col-span-1 row-span-2">Kolom 1</div>
<div class="col-span-2">Kolom 2-3</div>
<div class="col-span-3">Kolom 1-3</div>
</div>6. Pada contoh di atas, elemen pertama akan menempati 1 kolom dan 2 baris.
Itulah beberapa langkah untuk menggunakan sistem grid di Tailwind CSS. Kalian bisa menyesuaikan jumlah kolom, jarak antar elemen, serta jumlah kolom dan baris yang akan ditempati oleh setiap elemen sesuai dengan kebutuhan website kalian.
Cara membuat layout responsif menggunakan sistem grid
Cara membuat layout responsif menggunakan sistem grid di Tailwind CSS, bisa menggunakan class responsif yang disediakan. Berikut adalah langkah-langkahnya:
- Pertama, tentukan jumlah kolom yang akan digunakan untuk setiap ukuran layar. Misalnya, untuk layar besar (desktop) kalian ingin menggunakan 3 kolom, untuk layar sedang (tablet) 2 kolom, dan untuk layar kecil (mobile) 1 kolom.
- Untuk mengatur jumlah kolom untuk setiap ukuran layar, Kalian bisa memakai class “grid-cols-{jumlah}” di ikuti dengan postfix yang menunjukkan ukuran layar. Contoh, “grid-cols-3” untuk layar besar, “md:grid-cols-2” untuk layar sedang, dan “sm:grid-cols-1” untuk layar kecil. Contoh:
<div class="grid grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4">
<!-- Konten di sini -->
</div>- Kalian juga bisa menggunakan class responsif lain seperti “px-{ukuran}” untuk mengatur lebar kolom, “md:col-span-{jumlah}” untuk mengatur jumlah kolom yang ditempati pada layar sedang, dan sebagainya.
<div class="grid grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4">
<div class="col-span-1 md:col-span-2 sm:col-span-1">Kolom 1</div>
<div class="col-span-2 md:col-span-1 sm:col-span-1">Kolom 2-3</div>
<div class="col-span-3 md:col-span-2 sm:col-span-1">Kolom 1-3</div>
</div>- Selain itu juga bisa menggunakan class responsif seperti “hidden” untuk menyembunyikan elemen pada ukuran layar tertentu, dan “order-{angka}” untuk mengatur urutan tampilan elemen pada ukuran layar tertentu.
<div class="grid grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4">
<div class="col-span-1 md:col-span-2 sm:col-span-1">Kolom 1</div>
<div class="hidden md:block col-span-1 md:col-span-1 sm:col-span-1 order-3">Kolom 3</div>
<div class="col-span-2 md:col-span-1 sm:col-span-1 order-2">Kolom 2</div>
<div class="col-span-3 md:col-span-2 sm:col-span-1 order-1">Kolom 1-3</div>
</div>Dengan menggunakan class responsif di Tailwind CSS, Kalian bisa membuat layout yang responsif dan menyesuaikan dengan ukuran layar yang berbeda.
Demikian artikel tentang Understanding the Grid System Tailwind CSS semoga bermanfaat
