Belajar Sistem Grid Materialize CSS Framework

Halo teman teman dumetschool pada bagian pertama kita akan belajar sistem grid atau memahami sistem pembagian kolom dari Framework Materialize CSSnya. Framework ini sama seperti bootstrap yang pembagian sistem kolomnya dari 1 sampai 12 jadi maximal ada 12 kolom didalam satu baris. Untuk membuatnya kita butuh class container sebagai berikut

bedanya jika kita gunakan class container ini maka otomatis lebar websitenya sekitar 70% dan elemen-elemenya akan ada ditengah. Sebelum kita buat kolomnya kita harus mendefinisikan class row atau membuat barisnya didalamnya kita akan buat 3 kolom dengan menuliskan seperti berikut

Penulisannya dengan diawali dengan kata col spasi s lalu berapakolomnya. Karena kita hanya membuat 3 kolom berarti 12 dibagi 3 hasil classnya S4. Jadi itu semua tergantung kebutuhan teman teman. Jika dijalankan maka hasilnya tidak terlihat karena classnya tidak memiliki warna dan belum kita tambahkan text didalamnya maka dari itu kita akan atur setiap classnya untuk kita berikan background

teman teman lihat pada browsernya maka terlihat kolomnya dibagi menjadi 3 dengan background dan tulisan yang berbeda-beda.

dan hasil kolomnya tepat berada ditengah. Dan jika kita hilangkan class containernya maka lebar webnya selebar ukuran layar monitornya artinya full layar. Misalnya teman teman menambahkan satu kolom lagi dengan lebar S4

maka kolom tersebut tidak akan cukup karena sudah lebih dari 12 grid maka otomatis isi kolomnya ada dibagian bawahnya. Oke itu dia tentang sistem pembagian kolom pada materialize CSS Framework selamat mencoba dan terima kasih.