Desain Web Responsif - Tampilan Kisi
Apa itu Tampilan Grid?
Banyak halaman web didasarkan pada tampilan kisi, yang berarti bahwa halaman tersebut dibagi menjadi beberapa kolom:
Menggunakan tampilan grid sangat membantu saat mendesain halaman web. Itu membuatnya lebih mudah untuk menempatkan elemen pada halaman.
Tampilan kisi responsif sering kali memiliki 12 kolom, dan memiliki lebar total 100%, dan akan menyusut dan meluas saat Anda mengubah ukuran jendela browser.
Contoh: Tampilan Grid Responsif
Membangun Tampilan Grid yang Responsif
Mari mulai membangun tampilan grid yang responsif.
Pertama-tama pastikan bahwa semua elemen HTML memiliki box-sizing
properti yang disetel ke
border-box
. Ini memastikan bahwa padding dan border disertakan dalam total lebar dan tinggi elemen.
Tambahkan kode berikut di CSS Anda:
* {
box-sizing: border-box;
}
Baca lebih lanjut tentang box-sizing
properti di bab Ukuran Kotak CSS kami.
Contoh berikut menunjukkan halaman web responsif sederhana, dengan dua kolom:
Contoh
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
Contoh di atas baik-baik saja jika halaman web hanya berisi dua kolom.
Namun, kami ingin menggunakan tampilan grid responsif dengan 12 kolom, untuk memiliki kontrol lebih besar atas halaman web.
Pertama kita harus menghitung persentase untuk satu kolom: 100% / 12 kolom = 8,33%.
Kemudian kami membuat satu kelas untuk masing-masing dari 12 kolom, class="col-"
dan nomor yang menentukan berapa banyak kolom yang harus direntangkan bagian:
CSS:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
Semua kolom ini harus mengambang ke kiri, dan memiliki padding 15px:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Setiap baris harus dibungkus dengan file <div>
. Jumlah kolom di dalam satu baris harus selalu berjumlah 12:
HTML:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
Kolom di dalam baris semuanya mengambang ke kiri, dan karena itu dikeluarkan dari aliran halaman, dan elemen lain akan ditempatkan seolah-olah kolom tidak ada. Untuk mencegah hal ini, kami akan menambahkan gaya yang membersihkan aliran:
CSS:
.row::after {
content: "";
clear: both;
display: table;
}
Kami juga ingin menambahkan beberapa gaya dan warna agar terlihat lebih baik:
Contoh
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
Perhatikan bahwa halaman web dalam contoh tidak terlihat bagus saat Anda mengubah ukuran jendela browser menjadi sangat kecil. Di bab berikutnya Anda akan mempelajari cara memperbaikinya.