Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

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-sizingproperti 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-sizingproperti di bab Ukuran Kotak CSS kami.

Contoh berikut menunjukkan halaman web responsif sederhana, dengan dua kolom:

25%
75%

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.