Belajar Materialize #4 : Cara Menggunakan Sistem Grid Materialize

Belajar Materialize #4 : Cara Menggunakan Sistem Grid Materialize – Halo semua selamat datang di tutorial belajar materialize bahasa indonesia. Kodingin.com akan membahas tutorial lengkap cara menggunakan framework CSS yaitu Materialize.

Kali ini kita akan membahas mengenai sistem grid yang ada di framework CSS materialize.

Pernahkan anda melihat halaman website dengan tampilan kotak-kotak melabar ke kanan, bahkan dengan lebar yang berbeda-beda ?

Nah , itu yang dinamakan sistem grid. Jadi Grid pada Materialize membuat kolom dengan lebar yang berbeda beda.

Belajar Materialize #4 : Cara Menggunakan Sistem Grid Materialize

Untuk menggunakan Grid kita harus paham terlebih dahulu 2 class penting dalam materialize yaitu Row dan Container.

Row digunakan untuk membuat baris baru ke bawah, element css yang digunakan pada row bernilai minus. Row biasanya sebagai bungkus dari container dan system grid.

Di bawah ini contoh potongan kode penggunaan row.

Sedangkan Container sendiri yaitu class yang menampilkan lebar sebesar 70% layar dan terletak tengah pada halaman website.

Di bawah ini contoh potongan kode penggunaan container.

jika di ilustrasikan dengan gambar seperti gambar di bawah ini.

Cara Menggunakan Sistem Grid Materialize
Cara Menggunakan Sistem Grid Materialize

Terlihat jelas bahwa objek terletak ditengah bagian website.

Pengertian Sistem Grid Materialize

Sistem grid adalah pengaturan jumlah kolom dan lebar setiap bagian. Grid juga menyesuaikan dengan ukuran layar yang sedang digunakan.

Penggunaan sistem grid responsive pada semua device, misalnya PC, maka akan menyesuaikan lebar di PC.

Sistem Grid pada Materialize berjumlah 12, dimana masing-masing kotak memiliki nilai 1. artinya lebar tersebut yaitu 10%.

Macam-macam Layout Grid Materialize

Ada 4 macam layout grid yang dapat kita gunakan, setiap macam grid memiliki tampilan yang berbeda.

Berikut ini macam-macam layout grid pada materialize, macam layout di bawah ini awalan setiap nilai kolom grid.

Class Prefix .s

Class dengan awalan s digunakan untuk layar yang kecil, dengan ukuran kurang dari sama dengan 600px. Biasanya digunakan untuk ukuran device smartphone.

Class Prefix .m

Class Prefix .m digunakan untuk layar yang medium, dengan ukuran dengan ukuran lebih dari 600px. Biasanya digunakan untuk device table.

Class Prefix .l

Class Prefix .l digunakan untuk layar yang besar, dengan ukuran lebih dari 992px. Biasanya untuk device dekstop.

Class Prefix .xl

Class Prefix .xl digunakan untuk ukuran layar yang sangat besar, dengan ukutan di atas 1200px. Biasanya untuk layar monitor / LED.

Cara menggunakan sistem grid Materialize

Saya akan memberikan contoh cara membuat dan menggunakan sistem grid layout pada materialize.

Secara default grid tidak ada warnanya maka dari itu saya juga akan memberikan varian warna agar terlihat jelas.

Perhatikan kode di atas, terdapat beberapa variasi macam grid , yaitu s, m dan l. kita bisa menyesuaikan keinginan kita jumlah lebar kolom dengan device yang berbeda.

Sebagai contoh di atas pada baris 20, terlihat saya membuat ukuran untuk layar kecil dengan nilai 12 artinya mempunyai lebar yang penuh dan memberikan m4 artinya membuat lebar bernilai 4 dengan macam grid medium. Selain itu juga saya membeikan l2 artinya ketika di buka layar yang besar akan tampil setengah layar

Sekarang kita lihat hasilnya untuk masing-masing device.

Tampilan Large Desktop

Membuat Sistem Grid Larget Desktop Materialize
Membuat Sistem Grid Larget Desktop Materialize

Tampilan Desktop

Membuat Sistem Grid Desktop Materialize
Membuat Sistem Grid Desktop Materialize

Tampilan Tablet

Membuat Sistem Grid Tablet Materialize
Membuat Sistem Grid Tablet Materialize

Tampilan Mobile

Membuat Sistem Grid Mobile Materialize
Membuat Sistem Grid Mobile Materialize

Berdasarkan gambar di atas terlihat jelas, pada setiap device memiliki tampilan ukuran dan jumlah grid yang berbeda-beda.

Jadi dengan menggunakan sistem grid materialize kita lebih cepat membuat website secara responsiive, anda juga dapat menambahkan tambahan style untuk mempercatik tampilan materialize.

Terkadang kita mengalami kasus seperti ini, ingin membuat ukuran grid 6 namun di letakkan ditengah.

Bagaimana cara nya membuat tampilan grid materialize di tengah ?

Tenang, Materialize menyediakan class dengan nama offset, artinya menggesar grid ke kanan.

Sebagai contoh silahkan perhatikan code di bawah ini.

Dan jika kita lihat hasilnya, tampilan seperti pada gambar di bawah ini.

Menggunakan class offset pada materialize

Logikanya seperti ini, kita mempunya grid dengan nilai 6 berada di kiri, sedangkan di kanan terdapat ruang kosong dengan nilai 6 grid. Agar grid dapat ketengah kita menambahkan grid dengan nilai 3 di kanan dan di kiri.

Sehingga 6 dibagi 2, yaitu 3. Jadi kita perlu menambahkan offset-m3.

Kesimpulan…

Sistem Grid pada materialize terdapat 12 bagian dan memiliki macam-macam jenis device , mulai dari mobile hingga monitor yang besar.

Sisitem Grid juga dapat membuat suatu jarak, sehingga tampilan grid terdapat di tengah-tengah layar monitor yang sedang anda gunakan.

Sekian Belajar Materialize #4 : Cara Menggunakan Sistem Grid Materialize.

Baca Juga :

Terima Kasih.

Avatar
Didik
Saya Seorang Developer khususnya pada Bidang Website menggunakan Sistem Operasi Linux dan menyukai Pemrograman Website dan System Administrator. Selain itu saya pemilik website kodingin.com.

One comment

  1. […] Perhatikan kode diatas, terdapat varian footer dengan 4 elemen footer dan 2 baris yang digunakan. Perlu di ketahui kode diatas didalam tag footer menggunakan sistem grid pada materialize. […]

Leave a Reply