Panduan membuat CSS Grid sederhana dengan SASS

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 ini terlebih dahulu.

Pertama kita akan buat class .row kita, namun sebelumnya kita akan men-define mixing clearfix yang akan kita pakai di class .row kita, sebagai berikut :

@mixin clearfix()
{
    *zoom: 1;
    &:before,
    &:after
    {
        display: table;
        content: ' ';
    }
    &:after
    {
        clear: both;
    }
}

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:

.row()
{    
    @include clearfix(); 
    margin: 0 auto;
    max-width: 92.308em;
}

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 :

$columnCount: 12;
@for $i from 1 through $columnCount
{
    .column-#{$i}
    {
        float: left;
        width: ((100/$columnCount)*$i)*1%;
    }
}

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 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. Anda bisa juga melihat artikel saya mengenai CSS, SASS dan teknologi terkait lainnya disini.

Terima kasih dan semoga bermanfaat.

Ditulis oleh Irfan Maulana di sore hari yang mendung kala itu. :-)

Salam.