Aturan Dari Sistem Grid Materialize CSS Framework

Untuk responsivenya sendiri sistem grid ini sudah otomatis responsive ketika kita kecilkan layarnya maka kolomnya akan tetap terjaga. Sekarang kita akan menjelaskan aturan dari sistem grid pada Materialize CSS Framework. Aturan sistem gridnya adalah ukuran .s = small .m = medium dan juga ukuran .l = large. Untuk ukuran .s ini akan berlaku pada layar lebih kecil dari 600px untuk ukuran .m berlaku pada layar yang ukuran layarnya lebih kecil dari 992px sedangkan untuk .l lebih besar dari 992px. Jadi teman teman bisa mengatur sistem grid dengan aturan-aturan yang sudah ada pada materialize. Misalnya saya berikan class m12

dengan class m12 yakni ukuran desktop yang akan kita lihat pada ukuran sekarang maka akan menggunakan full lebarnya 12 meskipun ada s6 disana

Kesimpulannya ketika ukurannya lebih kecil dari 992px dan lebih besar dari 600px maka kolom yang pertama lebarnya akan menjadi full kolom tapi jika diresize layarnya sampai lebih kecil dari 600px maka content kolomnya akan dibagi menjadi 2.

Jadi konsep ini seperti gunakan if else di bahasa pemrograman ketika lebih kecil dari 600px maka kita gunakan class s4 sedangkan lebih besar dari 600px maka gunakan class m12. Tapi pada dasarnya jika tidak akan ubah layoutnya kita gunakan .s saja untuk semua ukuran layar tapi jika ingin mengubah spesifik small, medium, dan largenya. Kita bisa tumpuk seperti contoh berikut

ada 3 class yang bisa kita mainkan sangatlah simple. Semoga jelas dan terima kasih.