Selamat datang kembali di website tips dan trik Dumet School, kembali lagi dengan saya dalam pembahasan tips dan trik seputar dunia website. Pada artikel sebelumnya kita sudah mengenal color class pada framework css matrealize, di kesempatan yang baik ini kita akan melanjutkan pembahasan tentang Mengetahui Grid Sistem Pada Framework CSS Materialize. Pada umumnya setiap framework css menyediakan grid sistem yaitu 12 kolom, di framework matrealize ini juga memiliki grid sistem sebanyak 12 kolom. Jika kalian sering menggunakan bootstrap tentu jika belajar dengan framework matrealize ini tidak akan terlalu sulit karena tidak jauh berbeda penerapan dalam pemogramannya. Yaitu dengan memanggil class container,row,dan col kemudian baru ditambahkan pengaturan kolomnya.
Jika kita lihat pada gambar di atas ini untuk penentuan tampilan memiliki ukuran tertentu pada setiap device nya, selanjutnya pada artikel kali ini tentang Mengetahui Grid Sistem Pada Framework CSS Materialize kita akan mencoba implementasikan grid sistem pada framework css matrealize. Teman – teman silahkan siapkan file matrealize nya dan ketikkan script seperti gambar di bawah ini
Kemudian save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini
Untuk penjelasannya, setiap col saya berikan s6 m4 l3 xl3 yang akan menghasilkan
- xl3 : pada saat posisi Large Desktop Devices dengan ukuran > 1200 maka akan menghasilkan tampilan 4 kolom karena saya berikan xl3, perhitungannya adalah 12 : 3 = 4 kolom
- l3 : kondisi ini sama dengan xl3
- m4 : pada saat tampilan di tablet menghasilkan tampilan 3 kolom, perhitungannya adalah 12 : 4 = 3 kolom
- s6 : di tampilan mobile / handphone menghasilkan output 2 kolom, perhitungannya adalah 12 : 6 = 2 kolom
Untuk detil tampilannya
Tampilan xl3 dan l3
Tampilan m4
Tampilan pada saat di mobile / hanphone, nah dengan begitu website akan responsive dengan mengikuti pada setiap device nya. Sangat mudah sekali bukan, hampir sama dengan framework css Bootstrap dalam pemanggilan dan grid sistemnya. Dengan begitu bisa menjadi tambahan refrensi kalian untuk framework css nya, namun kembali lagi selera ada di setiap individu. Oke sekian pada artikel kali ini tentang Mengetahui Grid Sistem Pada Framework CSS Materialize kita berjumpa nkembali pada artikel yang akan datang. Semoga bermanfaat, terimakasih dan sampai jumpa.