Latest web development tutorials

Web Desain Responsif - Grid View

Apa yang dimaksud dengan tampilan grid?

Banyak halaman web yang berbasis desain grid, yang berarti bahwa halaman didasarkan pada kolom layout.

Gunakan tampilan grid membantu kita untuk merancang halaman web. Hal ini memungkinkan kami untuk menambah elemen halaman menjadi lebih mudah.

Responsif tampilan grid biasanya 12, lebar 100%, ketika jendela browser adalah ukurannya secara otomatis ditarik.

tampilan grid responsif

Buat tampilan grid responsif

Selanjutnya kita membuat tampilan grid responsif.

Pertama pastikan semua elemen HTML memiliki propertikotak-sizing dan set ke perbatasan-kotak.

Pastikan margin dan perbatasan yang terkandung antara lebar dan tinggi dari elemen.

Tambahkan kode berikut: 

* {
    box-sizing: border-box;
}

Lihat lebih kotak-sizing klik di: CSS3 properti kotak-sizing .

Contoh berikut menunjukkan halaman Web responsif sederhana yang berisi dua kolom:

contoh

.menu {
width: 25%;
float: kiri;
}
.main {
width: 75%;
float: kiri;
}

Coba »

Contohnya termasuk dua di atas.

sistem grid 12 dapat lebih mengontrol situs responsif.

Pertama, kita dapat menghitung persentase masing-masing kolom: 100% / 12 = 8,33%.

Ditentukan di masing-masingkelas kolom, class = "col" digunakan untuk mendefinisikan setiap kolom memiliki beberapa rentang:

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%; }

Coba »

Semua kolom dibiarkan mengambang, jarak (padding) ke 15px:

CSS:

[Class * = "col"] {
float: kiri;
padding: 15px;
border: 1px solid red;
}

Setiap baris menggunakan <div> paket. Semua kolom harus menambahkan hingga 12:

<Class Div = "row">
<Class Div = "col-3 "> ... </ div>
<Class Div = "col-9 "> ... </ div>
</ Div>

perilaku kolom kiri mengambang, dan menambahkan mengapung jelas:

CSS:

.row: setelah {
konten: "";
clear: both;
display: block;
}

Kita dapat menambahkan beberapa gaya dan warna, biarkan terlihat lebih baik:

contoh

html {
font-family: "Lucida Sans" , sans-serif;
}
.header {
background-color: # 9933cc;
Warna: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: # 33b5e5;
Warna: #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;
}

Coba »