Membuat CSS Grid Sederhana dengan SASS

Membuat CSS Grid Sederhana dengan SASS

Gambaran grid layout pada sebuah halaman web

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 :

https://gist.github.com/mazipan/9a58bd1a8bda0a8a5b4bb2daf2a5ddb8

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:

https://gist.github.com/mazipan/1d89fdcae5d021382de10a550c46d437

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 :

https://gist.github.com/mazipan/a03e39916e1aaa6d8fe7d456a5d63313

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 :

https://gist.github.com/mazipan/ce3041dc41e44c341e50300dd39b5180

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. 🙂

 

Irfan Maulana

Seorang pengembang web antar muka dengan pengalaman lebih dari 5 tahun di beberapa perusahaan. Pengetahuan saya meliputi HTML, CSS, dan JavaScript. Saya juga memiliki beberapa projek open source yang bisa kalian lihat di Github saya @mazipan. Selalu senang hati bisa berbagi pengetahuan dan pengalaman dengan teman-teman.