Sebelum kita memulai belajar sistem grid pada bulma framework ada baiknya teman-teman baca artikel Apa Itu Bulma Framework?. Seperti disebutkan sebelumnya, Bulma adalah kerangka kerja yang dirancang untuk digunakan untuk mengembangkan desain web yang responsif. Bulma menggunakan sistem grid dasar Flexbox dan menambahkan banyak fitur untuk Anda manfaatkan. Beberapa dari mereka sangat penting untuk setiap situs web, terutama jika Anda ingin memiliki tata letak yang responsif dan bekerja dengan baik pada setiap perangkat. Kali ini saya akan membahas tentang Sistem Grid Pada Bulma CSS Framework
Membangun Sistem Grid Pada Bulma CSS Framework sangat mudah dengan Bulma. Anda hanya perlu menambahkan wadah kolom, lalu tempatkan wadah kolom di dalamnya. Tidak perlu melalui pengenal CSS yang rumit hanya untuk memiliki tata letak yang responsif. Anda juga bisa mengubah ukuran masing-masing kolom. Coba anda ketikan kode html di bawah ini untuk melihat siste grid pada bulma dan untuk penjelesannya saya sudah beri commenting pada tag HTML-nya, berikut kodenya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<body> <!--Pembagian 4 kolom--> <!--columns berfungsi sebgai container--> <div class="columns"> <div class="column"> <p class="notification is-info">Kolom 1</p> </div> <div class="column"> <p class="notification is-success">Kolom 2</p> </div> <div class="column"> <p class="notification is-warning">Kolom 3</p> </div> <div class="column"> <p class="notification is-danger">Kolom 4</p> </div> </div> <!--Pembagian 3 kolom--> <div class="columns"> <!--Kolom pertama terdiri dari 3 kolom yang di satukan dan kolom lainnya akan menyesuaikan dengan ketersedian jumlah kolom yang tersedia--> <div class="column is-three-quarters"> <p class="notification is-info">Kolom 1</p> </div> <div class="column"> <p class="notification is-success">Kolom 2</p> </div> <div class="column"> <p class="notification is-warning">Kolom 3</p> </div> </div> </body> |
Setelah anda save coba anda buka pada browser anda maka tampilan kolom atau gridnya akan seperti ini:
Bulma didasarkan pada sistem 12 kolom. Tentu, Anda dapat mengimbangi kolom, membuat kolom sebanyak yang Anda butuhkan dan mengubah konfigurasi setiap kolom dengan menempatkan pengenal yang benar ke tag <div>. Ini adalah salah satu sistem grid yang paling sederhana untuk digunakan.
Sekian Artikel tentang Sistem Grid Pada Bulma CSS Framework. Semoga bermanfaat.