Cara mudah membuat grid agar tertata rapi

, ,

Gambar 0.1 Preview grid rapi.
Cara membuat grid simple sekali supaya bisa dipahami, gak susah kalo mau belajar, kalo mau hasil yang bagus perlu script yang lebih panjang ini hanya untuk contoh siapa tau ada yang lagi mau belajar. kita pakai float yah, bisa juga pakai inline kalo pakai float hasilnya akan cenderung ke kananan atau kekiri tergantung floatnya.

Saya membuat ini selama 30 menit, agak lama karena mengatur width,nya agak susah , ini kolom yah, kalo mau 2 atau 3 kolom bisa disesuaikan sendiri, tinggal mengatur width saja, otomatis width ysng pas akan naik dengan sendirinya alias berjejer debngan div kolom lainnya.

inspirasi saya dari framework skeleton, gridnya memang hebat, dan saya mencoba memodifikasinya sedikit agar lebih keren dan rapi.

oke berikut kodenya:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='application/vnd.wap.xhtml+xml; charset=utf-8' />
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Cara membuat Grid Simple</title>
<style>
*{margin:0;padding:0;}
.left,.right{
width:50%;height:150px;}
.left{
background:red;
float:left;}
.right{background:blue; float:right;}
.div1,
.div2,
.div3,
.div4,
.div5,
.div6{
margin:8px;
width:30%;
height:150px;
float:left;
}
.div1{
background:#000;}
.div2{background:#222}
.div3{background:#444;}
.div4{background:#666}
.div5{background:#888}
.div6{background:#aaa}
</style>
</head>
<body>
<div class='left'></div>
<div class='right'></div>

<div style='clear:both'></div>

<div class='div1'></div>
<div class='div2'></div>
<div class='div3'></div>
<div class='div4'></div>
<div class='div5'></div>
<div class='div6'></div>
</body>
</html>

Tidak ada komentar:

Posting Komentar

Maaf, fitur koment hanya untuk pengguna akun goggle saja.
Dikarenakan untuk meminimalisir komentar spam.