Apa itu grid view?
Secara harfiah grid view artinya tampilan bergaris.
Dalam konteks web design, grid view adalah teknik membuat desain web berdasarkan layout grid / garis. Secara umum menggunakan 12 grid system.
Mengapa memilih 12? Karena angka 12 inilah angka yang jika dibagi maka hasilnya paling efektif.
Sama seperti jumlah bulan dalam setahun itu ada 12, karena menghitung 1/3, 1/4, 1/5, 1/6, dst itu lebih mudah jika angkanya 12.
Contoh grid view
Perhatikan gambar layout dasar 12 grid dibawah:
Warna biru itu adalah batas layout yang bisa digunakan untuk membuat layout website.
Implementasinya seperti berikut:
Menghitung ukuran grid
Ukuran grid dalam css menggunakan satuan unit relative persen %.
Karena menggunakan 12 grid system, maka untuk 1 kolom / 1 grid memiliki ukuran: 100% / 12 = 8,33% tiap kolom.
.kolom-1 {width: 8.33%;}
.kolom-2 {width: 16.66%;}
.kolom-3 {width: 25%;}
.kolom-4 {width: 33.33%;}
.kolom-5 {width: 41.66%;}
.kolom-6 {width: 50%;}
.kolom-7 {width: 58.33%;}
.kolom-8 {width: 66.66%;}
.kolom-9 {width: 75%;}
.kolom-10 {width: 83.33%;}
.kolom-11 {width: 91.66%;}
.kolom-12 {width: 100%;}
Jika kita menggunakan bootstrap maka akan lebih mudah, karena bootstrap sudah menggunakan 12 grid system ini.