Mungkin anda pernah mendengar istilah Grid.. Yah, physician grid biasa kita temui dan menjadi salah satu bagian ketika kita mendesain sesuatu. Grid biasanya dibangun dari garis-garis yang beraturan yang membentuk satu kesatuan.

Grid dapat membantu kita untuk menempatkan berbagai elemen dalam sebuah desain agar nampak beraturan, buy lebih harmoni, there lebih memiliki alur. Perhatikan contoh layout dibawah:

Pada gambar sebelah kiri, memiliki tata letak yang tidak beraturan. Sedangkan pada gambar sebelah kanan, gambar tertata rapi berdasarkan grid yang ada. Jadi grid memberikan patokan-patokan dan ukuran-ukuran yang memungkinkan sebuah area atau objek memiliki ukuran dan posisi yang teratur.

Dalam dunia desain cetak dan web, penggunaan Grid sebagai acuan desain akan sangat membantu seorang desainer menyelesaikan pekerjaannya. Pada artikel selanjutnya, kita akan mempelajari penggunaan grid dalam membuat sebuah desain. (Sumber : http://www.designmagz.com/)

Twitter bootstrap memiliki standard grid 12 kolom untuk lebar 940px tanpa fitur responsif dan 724px and 1170px menggunakan fitur responsif. Apabila viewportnya di bawah 767px, maka kolom akan menggulung ke bawah.

Pemahaman atas konsep Grid ini sangat membantu kita dalam mengatur layout website yang akan kita buat.

Contoh Penerapan Dasar Grid :

Misalnya kita ingin menampilkan 2 kotak, maka kita gunakan class row dan span yang sudah didefinisikan oleh bootstrap.

Penulisan class “span” diikuti dengan jumlah grid yang akan ditampilkan, misalnya span4 dan span8.

<div class=”row”>
<div class=”span4 well”>kolom 1 dengan span4</div>
<div class=”span8 well”>kolom 2 dengan span8</div>
</div>

Silahkan lihat hasilnya di sini 😀