Dalam mendesain suatu web terdapat komponen yang seharusnya ada pada suatu halaman website, seperti misalnya header, ketersediaan widget untuk memudahkan akses ke dalam konten, elemen yang seimbang antara satu dengan lainnya dan lain sebagainya.

Dalam menyeimbangkan beberapa elemen memang membutuhkan sedikit kode yang mungkin dapat diingat namun cara pengaplikasiannya tidak semudah mengingat kodenya, dalam hal ini kita akan mulai berhubungan dengan sistem grid.

Apa itu sistem grid ?

Sistem Grid pada desain halaman website merupakan salah satu sistem yang mengatur letak salah satu elemen berdasarkan posisi, lebar hingga tinggi agar desain yang diperlihatkan kepada pengunjung terlihat seimbang. jika pada kasus lain grid digunakan sebagai patokan antara garis vertical dan horizontal, maka sistem grid pada website berfungsi untuk menyeimbangkan.

Cara mengaplikasikan grid ?

Untuk mengaplikasikan grid memang sangat mudah namun yang tersulit adalah apakah elemen tersebut sudah pas dan seimbang dengan elemen lainnya ?, jawaban itu hanya bisa dijawab oleh kalian sendiri. pengaplikasian grid sering sekali digunakan untuk membuat sidebar pada halaman website, sidebar tersebut akan di isi dengan widget yang berguna sebagai alat bantu navigasi atau lainnya.

Kode CSS :

.sidebar {
    float:left;
    width:25%;
.content {
    float:left;
    width:73%;
}

Kode HTML

<html>
<body>
</div> </body> </html>

Nilai width dapat diganti dengan pixel maupun em itu tergantung dari selera masing-masing pembuat desain web, namun jika ingin dibuat responsive maka gunakan css media on screen.

Bagaimana jika menggunakan framework yang sudah ada ?

Untuk menggunakan framework yang sudah ada memang menjadi cara termudah, karena biasanya framework pada umumnya telah memiliki fungsi responsive sehinga pengguna tidak perlu lagi repot-repot membuat kode cssnya. namun kalian dapat mengaplikasikannya dengan cara mengikuti petunjuk yang ada dan pada umumnya struktur codenya tidak melebihi dari contoh yang ada diatas.