Membuat CSS Grid - CSS Grid merupakan layout kumpulan class CSS yang digunakan untuk mengatur layout sebuah halaman website. Pada framework-framework CSS populer di luar sana, hampir semuanya mengakomodir kebutuhan CSS Grid dengan pendekatannya masing-masing.
CSS Grid biasanya membagi layout ke dalam konsep row dan column. Dimana row akan berfungsi seperti tr pada table HTML, sedangkan column akan berfungsi layaknya td pada table HTML.
Pada tutorial kali ini kita akan coba membuat CSS Grid sendiri dengan sedikit mencontoh pada apa yang dilakukan oleh beberapa framework populer diluar sana dengan bantuan CSS Pre-Processor SASS agar mempermudah kita dalam membuatnya, bila Anda belum familiar dengan SASS mungkin Anda perlu membaca artikel Setup SASS dengan Node.js dan Gulp terlebih dahulu, atau bila Anda lebih familiar dengan Grunt sebagai task Runner silahkan download Ebook membuat Framework CSS sendiri karena di dalamnya terdapat langkah-langkah setup SASS dengan Grunt.
Pertama kita akan buat class .row kita, namun sebelumnya kita akan men-define mixin clearfix yang akan kita pakai di class .row kita, sebagai berikut :
Mixin clearfix ini digunakan agar antar class row tidak terjadi tumpang tindih karena di dalamnya biasanya akan banyak menggunakan rule float: something.
Setelah membuat mixin tersebut, kita akan membuat class .row-nya sedikit mengikuti dengan apa yang dibuat oleh framework foundation dalam menetapkan max-width nya agar ketika ditampilkan dilayar yang terlalu lebar tidak sampai fullscreen , berikut kodenya:
Setelah berhasil membuat row, kita akan membuat class .column kita, dan mengikuti dari beberapa framework populer yang membagi column mereka kedalam 12 bagian maka kita juga akan membaginya kedalam 12 bagian, dimana kita akan memberikan nama class sesuai dengan urutan angka dari column-1 sampai column-12 yang masing-masing memiliki lebar yang jika dijumlahkan akan menjadi 100% width. Untuk implementasi kodenya, kurang lebih seperti berikut :
Dan kebutuhan dasar CSS Grid kita telah selesai dibuat dengan cepat, sederhana namun tetap memenuhi kaidah Grid Layout. Anda bisa memodifikasi, menambahkan ataupun mengurangi sesuai dengan kebutuhan masing-masing karena artikel ini memang dibuat untuk kebutuhan belajar dasar-dasarnya saja.
Untuk menggunakan class tersebut bisa lihat contoh kode berikut :
Anda bisa melihat hasil tampilan kode tersebut di halaman demo bem-kit ini.
Untuk full source code pembuatan Grid CSS Anda bisa coba lihat di github repo saya disini, disitu sudah terdapat cara saya membuat Grid CSS beserta beberapa tambahan kebutuhan lainnya seperti offset dan lain-lain yang bisa Anda lihat disini. Anda bisa juga melihat artikel saya mengenai CSS, SASS dan teknologi terkait lainnya disini . Artikel ini telah di publikasikan juga di codepolitan.com.
Download Ebook Programming disini
Terima kasih dan semoga bermanfaat.
Ditulis oleh Irfan Maulana di sore hari yang mendung kala itu. 🙂