Grid System pertama kali digunakan untuk menyususn kumpulan tulisan tangan di atas kertas dan kemudian digunakan dalam dunia penerbitan untuk menyusun tata letak halaman yang dicetak. Sekarang sistem ini pun juga diadopsi dalam desain web.

Kita membagi tata letak halaman web menjadi kolom yang dipisahkan dengan margin dan Whitespace. Dengan menerapkan sistem ini, kita dapat membagi menjadi beberapa kolom yang digunakan untuk membantu kita mengatur konten. Misalnya, kita dalam ukuran browser desktop, kita dapat menggunakan pengaturan untuk 12 kolom. Tablet menggunakan 6/8 kolom dan mobile bisa menggunakan 2/4 kolom.

Beberapa website yagn dapat membantu dalam membuat grid:

  1. 960.gs
  2. 1200px

Untuk desain website BINUS, kami menggunakan sistem grid 12 kolom untuk desktop, 8 kolom untuk tablet, dan 2 kolom untuk mobile. Sistem grid sangat membantu ketika kita ingin membuat desain responsive. Kita dapat menentukan bentuk layout dengan konsistensi yang baik.

 

Sumber: Interaction Design Foundation
Featured Image: Photo by Iewek Gnos on Unsplash