Grid System (Sistem Grid)

TL;DR: Grid system adalah kerangka kolom, selokan (gutter), dan margin yang menjadi acuan penempatan setiap elemen di halaman. Grid tidak terlihat oleh pengunjung, tetapi konsistensinya yang membuat sebuah situs terasa rapi dan mudah dibaca.

Apa itu Grid System?

Grid system adalah struktur berupa garis bantu vertikal dan horizontal yang membagi halaman menjadi kolom dengan jarak seragam. Setiap elemen, mulai dari judul, gambar, sampai tombol, ditempatkan mengikuti garis itu.

Analogi yang paling dekat adalah rak buku. Rak menentukan di mana buku boleh diletakkan. Tanpa rak, buku tetap bisa ditumpuk, tetapi hasilnya berantakan dan sulit dicari. Grid melakukan hal yang sama untuk halaman web.

Tiga komponen dasarnya: kolom (column) sebagai area konten, selokan (gutter) sebagai jarak antar kolom, dan margin sebagai ruang di tepi luar. Grid bekerja berdampingan dengan tipografi dan aturan responsive design untuk menghasilkan layout yang stabil.

Pola Grid yang Umum Dipakai

Di CSS modern, grid diimplementasikan lewat CSS Grid Layout atau Flexbox. Penjelasan teknis lengkapnya tersedia di panduan CSS Grid Layout MDN.

Kenapa Penting?

Grid menyelesaikan masalah yang sering muncul saat sebuah situs dikerjakan lebih dari satu orang atau berkembang selama bertahun-tahun: setiap halaman baru punya jarak dan lebar yang sedikit berbeda, dan lama-lama situs terasa tidak satu keluarga. Dengan grid yang disepakati di awal, keputusan tata letak berhenti menjadi debat selera.

Ada juga dampak teknis. Elemen yang ukurannya sudah ditentukan grid lebih kecil kemungkinannya menggeser konten saat halaman dimuat, sehingga membantu menjaga skor CLS. Bagi tim yang memakai style guide, grid biasanya menjadi lapisan paling dasar sebelum warna dan komponen didefinisikan.

Pertanyaan Umum

Apakah grid 12 kolom selalu pilihan terbaik?

Tidak selalu, tetapi 12 kolom populer karena angkanya habis dibagi 2, 3, 4, dan 6, sehingga satu grid bisa melayani banyak variasi susunan tanpa perlu grid tambahan.

Apa bedanya grid system dan wireframe?

Grid adalah aturan penempatan yang berlaku permanen di seluruh situs. Wireframe adalah sketsa satu halaman tertentu. Wireframe yang baik biasanya digambar di atas grid.

Apakah grid membatasi kreativitas desain?

Grid membatasi keputusan acak, bukan ide. Desain yang tampak bebas justru umumnya dibuat di atas grid, lalu sengaja melanggar grid itu di satu atau dua tempat sebagai aksen.