Home » CSS » Tampilan Grid RWD di CSS: Code dan Penerapannya

Tampilan Grid RWD di CSS: Code dan Penerapannya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Apa itu Tampilan Grid?

Banyak halaman web didasarkan pada tampilan grid yang berarti halaman dibagi menjadi kolom. Menggunakan tampilan grid sangat membantu saat mendesain halaman web. Hal ini membuatnya lebih mudah untuk menempatkan elemen di halaman.

Tampilan grid responsif sering kali memiliki 12 kolom dan memiliki lebar total 100%, serta akan menyusut dan meluas saat kita mengubah ukuran jendela browser.

Membangun Tampilan Grid yang Responsif

Mari mulai membuat tampilan grid yang responsif.

Pertama, pastikan bahwa semua elemen HTML memiliki properti box-sizing yang disetel ke border-box. Hal ini untuk memastikan bahwa padding dan border disertakan dalam total lebar dan tinggi elemen.

Tambahkan kode berikut di CSS :

* {
  box-sizing: border-box;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.header {
  border: 1px solid red;
  padding: 15px;
}

.menu {
  width: 25%;
  float: left;
  padding: 15px;
  border: 1px solid red;
}

.main {
  width: 75%;
  float: left;
  padding: 15px;
  border: 1px solid red;
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class = "menu">
   <ul>
     <li> Penerbangan </li>
     <li> Kota </li>
     <li> Pulau </li>
     <li> Makanan </li>
   </ul>
</div>

<div class = "main">
   <h1> Kota </h1>
   <p> Chania adalah ibu kota wilayah Chania di pulau Kreta. Kota dapat dibagi menjadi dua bagian, kota tua dan kota modern. </p>
   <p> Ubah ukuran jendela browser untuk melihat bagaimana konten merespons pengubahan ukuran. </p>
</div>

</body>
</html>

Contoh di atas baik-baik saja jika halaman web hanya berisi dua kolom.

Namun, jika kita ingin menggunakan tampilan grid responsif dengan 12 kolom untuk memiliki kontrol lebih besar atas halaman web, contoh di atas akan terlalu sulit untuk terlihat responsive.

Pertama kita harus menghitung persentase untuk satu kolom: 100% / 12 kolom = 8,33%.

Kemudian kita buat satu kelas untuk masing-masing dari 12 kolom, class = "col-" dan sebuah angka yang menentukan berapa banyak kolom yang harus direntangkan pada bagian tersebut:

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

Contoh :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.header {
  border: 1px solid red;
  padding: 15px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

.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%;}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">

<div class = "menu">
   <ul>
     <li> Penerbangan </li>
     <li> Kota </li>
     <li> Pulau </li>
     <li> Makanan </li>
   </ul>
</div>

<div class = "main">
   <h1> Kota </h1>
   <p> Chania adalah ibu kota wilayah Chania di pulau Kreta. Kota dapat dibagi menjadi dua bagian, kota tua dan kota modern. </p>
   <p> Ubah ukuran jendela browser untuk melihat bagaimana konten merespons pengubahan ukuran. </p>
</div>

</div>

</body>
</html>

Semua kolom ini harus float ke kiri dan memiliki padding 15px:

Kode CSS :

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

Setiap baris harus dibungkus dengan <div> . Jumlah kolom dalam satu baris harus selalu berjumlah 12:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Kolom di dalam baris semuanya float ke kiri dan oleh karena itu dikeluarkan dari aliran halaman dan elemen lain akan ditempatkan seolah-olah kolom tidak ada. Untuk mencegah hal ini, kita akan tambahkan style yang akan membersihkan aliran:

Kode CSS :

.row::after {
  content: "";
  clear: both;
  display: table;
}

Kita juga akan menambahkan beberapa gaya dan warna agar terlihat lebih baik:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

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

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;
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">

<div class = "menu">
   <ul>
     <li> Penerbangan </li>
     <li> Kota </li>
     <li> Pulau </li>
     <li> Makanan </li>
   </ul>
</div>

<div class = "main">
   <h1> Kota </h1>
   <p> Chania adalah ibu kota wilayah Chania di pulau Kreta. Kota dapat dibagi menjadi dua bagian, kota tua dan kota modern. </p>
   <p> Ubah ukuran jendela browser untuk melihat bagaimana konten merespons pengubahan ukuran. </p>
</div>

</div>

</body>
</html>

You may also like