Bellawan Kusuma

Web Development

Panduan Lengkap: Membuat Layout Web Responsive dengan CSS Grid

Membuat <b>Layout Web Responsive</b> dengan <b>CSS Grid</b>

Membuat Layout Web Responsive dengan CSS Grid

CSS Grid adalah modul tata letak CSS yang paling kuat, memungkinkan pembuatan layout yang kompleks dan responsive dengan mudah. Dalam panduan ini, kita akan belajar cara membuat layout web responsive menggunakan CSS Grid yang modern dan fleksibel.

Layout Web Responsive

Layout responsive adalah pendekatan desain web yang memastikan situs web Anda berfungsi dengan baik di berbagai perangkat dan ukuran layar. Layout responsive memastikan tampilan yang Anda desain dapat dilihat dan tersampaikan secara proporsional di semua perangkat. Harapannya konten yang Anda tampilkan di perangkat layar besar seperti PC, dapat pula dilihat pada perangkat mobile seperti HP, tanpa merusak desain layout aplikasi Anda.

Bahkan Anda dapat menyesuaikan, layout yang berbeda pada setiap perangkat yang berbeda. Ini penting karena saat ini pengguna tidak hanya mengakses internet melalui PC, namun semakin banyak pengguna mengakses web melalui perangkat mobile mereka.

Contoh aplikasi desain web responsive dengan CSS Grid:

Contoh Penerapan Layout Web Responsive

Contoh Penerapan Layout Web Responsive

Implementasi

Sebagai implementasi desain responsive ini, mari kita sederhanakan dengan mengikuti layout berikut ini.

Layout Web Responsive

Layout Web Responsive

Kerangka HTML

Kode HTML lengkap untuk membangun layout web responsive. Bagian ini menyediakan struktur dasar dari halaman web yang akan kita buat. 

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>BKA - Layout Web Responsive dengan CSS Grid</title>
    <link
      rel="stylesheet"
      href="style.css"
    />
  </head>
  <body>
    <section class="container">
      <div class="header">Header</div>

      <div class="left-sidebar">Left Sidebar</div>

      <div class="top-content">Top Content</div>

      <div class="right-sidebar">Right Sidebar</div>

      <div class="main">Main</div>

      <div class="low-content">Lower Content</div>

      <div class="footer">Footer</div>
    </section>
  </body>
</html>

Kerangka CSS

Kode CSS lengkap untuk membuat layout web responsive dengan CSS Grid. Bagian ini memberikan styling dan tata letak untuk HTML yang telah dibuat. 

/* style.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-rows: 80px 60px 1fr 60px 50px;
  grid-template-columns: 1fr 4fr 1fr;
  height: 100vh;
  grid-template-areas:
    "header header header"
    "left-sidebar top-content right-sidebar"
    "left-sidebar main right-sidebar"
    "left-sidebar low-content right-sidebar"
    "footer footer footer";
  grid-gap: 10px;
  padding: 10px;
  font-weight: 600;
  font-size: 20px;
}

@media (max-width: 640px) {
  .container {
    grid-template-rows: 50px 50px 50px 1fr 50px 50px 50px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "top-content"
      "left-sidebar"
      "main"
      "right-sidebar"
      "low-content"
      "footer";
  }
}

.container > * {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.header {
  grid-area: header;
  background: yellow;
}

.left-sidebar {
  grid-area: left-sidebar;
  background: green;
}

.top-content {
  grid-area: top-content;
  background: red;
}

.right-sidebar {
  grid-area: right-sidebar;
  background: yellow;
}

.main {
  grid-area: main;
  background: blue;
}

.low-content {
  grid-area: low-content;
  background: green;
}

.footer {
  grid-area: footer;
  background: blue;
}

Breakdown

Kerangka HTML

1. Struktur Dasar

Pastikan struktur html Anda memiliki struktur dasar berupa tag <html> <head> dan <body>. Serta jangan lupa menghubungkan file html Anda dengan style.css pada tag <head>.

2. Section Utama 

<!-- index.html -->

<section class="container">
  <div class="header">Header</div>

  <div class="left-sidebar">Left Sidebar</div>

  <div class="top-content">Top Content</div>

  <div class="right-sidebar">Right Sidebar</div>

  <div class="main">Main</div>

  <div class="low-content">Lower Content</div>

  <div class="footer">Footer</div>
</section>

Dalam studi kasus ini, section utama akan membungkus semua komponen. Section utama ditandai dengan tag <section> yang kita beri class container. Di dalamnya akan terdapat 7 komponen yaitu: header, left sidebar, top content, right sidebar, main, low content, dan footer.

2.1 Header

Header atau tajuk merupakan komponen paling atas pada halaman web yang umumnya berisi navigasi (navbar). Dimaksudkan untuk berpindah dari satu halaman utama, ke halaman penting lainnya dalam web. Secara praktik umum, header (navbar) akan diletakkan pada setiap halaman.

2.2 Left Sidebar dan Right Sidebar

Sidebar adalah komponen dalam suatu halaman, yang umumnya memiliki fungsi menampung widget atau fungsi tambahan untuk mendukung suatu halaman. Seperti contoh memuat navigasi, tags, categories atau fungsi lain seperti form pencarian.

Left Sidebar dan Right Sidebar memiliki fungsi yang sama, dan dapat ditampilkan salah satu maupun keduanya. Yang membedakan hanya letak sidebar pada halaman.

2.3 Top Content

Top content adalah bagian dari konten utama, yang biasanya bisa berisi informasi umum. Contohnya seperti banner, breadcrumb, dan highlight.

2.4 Main

Main dapat diartikan konten utama. Di dalamnya dapat berisi konten dalam bentuk konten dinamis seperti artikel, list beberapa artikel, maupun konten statis seperti about us atau contact form.

Informasi utama dalam sebuah halaman disajikan dalam komponen main.

2.5 Low Content

Low content adalah bagian dari konten utama, yang sifatnya sebagai tambahan. Contohnya dapat berupa related post, dan form komentar.

2.6 Footer

Footer adalah komponen yang secara umum ditempatkan pada setiap halaman. Mirip dengan header, namun posisi footer berada di paling bawah dari sebuah halaman. Footer dapat berisi credit, hyperlink, copyright atau terms of use dari sebuah website.

Kerangka CSS

Di dalam artikel ini, kita akan mendapatkan 2 hasil sekaligus, yakni layout untuk layar lebar (PC) dan layout untuk layar kecil (mobile/HP). Di dalam struktur html kita hanya memerlukan 1 kerangka saja, dengan kejaiban CSS kita buat menjadi 2 layout.

Bagian awal, kita akan menggunakan CSS Reset. CSS Reset adalah sebuah istilah untuk menormalisasi perilaku browser. Setiap browser memiliki properti default untuk menangani setiap elemen. Seperti margin, padding dan box-sizing pada setiap browser terkadang memiliki nilai yang berbeda untuk masing-masing elemen. Untuk itu kita perlu merakukan reset properti tersebut, agar apa yang tampil pada layar kita sama dengan apa yang dilihat oleh pengguna. 

/* style.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Kita menggunakan selector all * untuk melakukan seleksi pada semua elemen dalam halaman. Kita tentukan nilai awal agar setiap elemen secara default memiliki nilai margin: 0, padding: 0 dan box-sizing: border-box.

1. Section Utama

Section utama kita bungkus ke dalam class container. Section ini akan menampung dan mengatur layout semua komponen yang ada dalam halaman yang akan kita buat. Di section utama inilah, inti dari pembahasan pada artikel ini. 

/* style.css */

.container {
  display: grid;
  grid-template-rows: 80px 60px 1fr 60px 50px;
  grid-template-columns: 1fr 4fr 1fr;
  height: 100vh;
  grid-template-areas:
    "header header header"
    "left-sidebar top-content right-sidebar"
    "left-sidebar main right-sidebar"
    "left-sidebar low-content right-sidebar"
    "footer footer footer";
  grid-gap: 10px;
  padding: 10px;
  font-weight: 600;
  font-size: 20px;
}

/* optional */
.container > * {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

Dari cuplikan code di atas, class container memiliki beberapa properti. Yang perlu diperhatikan adalah:

Display, kita perlu mendefinisikan display section utama kita yaitu grid

Grid-template-rows, template ukuran tiap baris dari grid yang kita buat. Dari atas ke bawah, kita bayangkan akan memiliki sebuah bidang yang dibagi menjadi 5 baris, dengan tinggi tiap barisnya 80px 60px 1fr 60px dan 50px. Nilai 1fr berarti 1 fraction, yang maknanya tinggi dari baris tersebut 1 bagian dari total tinggi. Karena tinggi baris lain telah didefinisikan, maka nilai 1fr akan menempati sisa ruang yang ada.

Grid-template-columns, template ukuran tiap kolom. Dari kiri ke kanan kita akan membuat 3 kolom dengan lebar tiap kolomnya 1fr 4fr 1fr. Nilai ini akan mengkalkulasi secara otomatis, masing masing lebar kolom dari total lebar yang tersedia. Dari nilai yang kita berikan, total seluruh lebar grid adalah 6fr. Maka lebar tiap kolom menjadi 1/6 4/6 dan 1/6 bagian dari total lebar grid.

Height, atau tinggi section. Kita beri nilai 100vh agar semua komponen dapat terlihat di layar. Dalam praktek, Anda dapat menyesuaikan sesuai dengan kebutuhan Anda.

Grid-template-areas, salah satu kecanggihan dari grid kita dapat dengan mudah membuat layout yang kompleks. Di properti ini, kita secara visual dapat mengatur letak dan ukuran setiap komponen.

Pada cuplikan kode di atas, nilai grid-template-areas berisi 5 baris, tiap baris dibatasi dengan tanda double petik " " (sesuai dengan jumlah baris pada grid-template-rows). Di tiap baris berisi nama cell/item yang dipisahkan dengan spasi. Jika diperhatikan, tiap baris memiliki 3 cell, yang merupakan implementasi 3 kolom yang kita buat dari grid-template-columns.

Setiap nama cell, merepresentasikan letak 1 komponen yang kita buat. Anda akan menemui nama cell yang sama, hal itu berarti 1 komponen, akan menempati sepanjang kolom/baris yang memiliki nama yang sama. Jika Anda familiar dengan Microsoft Excel, hal ini sama dengan merge cell.

Grid-gap, menentukan jarak antar cell.

Optional, pada class .container > * hanya mengatur posisi tulisan yang ada di setiap komponen.

2. Komponen

Setiap komponen kita berikan class sesuai dengan fungsi masing-masing. 

/* style.css */

.header {
  grid-area: header;
  background: yellow;
}

.left-sidebar {
  grid-area: left-sidebar;
  background: green;
}

.top-content {
  grid-area: top-content;
  background: red;
}

.right-sidebar {
  grid-area: right-sidebar;
  background: yellow;
}

.main {
  grid-area: main;
  background: blue;
}

.low-content {
  grid-area: low-content;
  background: green;
}

.footer {
  grid-area: footer;
  background: blue;
}

Pada masing-masing class, kita berikan properti grid-area. Nilai properti ini harus sama dengan nama cell yang kita atur pada grid-template-areas. Tiap class kita beri warna background yang berbeda untuk memudahkan dalam pengembangan.

Dengan demikian kita telah dapat membuat layout dengan CSS Grid.

3. Mobile View

Kita dapat dengan mudah membuat layout yang berbeda pada mobile view dengan menggunakan media query. 

/* style.css */

@media (max-width: 640px) {
  .container {
    grid-template-rows: 50px 50px 50px 1fr 50px 50px 50px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "top-content"
      "left-sidebar"
      "main"
      "right-sidebar"
      "low-content"
      "footer";
  }
}

Cuplikan kode di atas, hanya akan ditampilkan apabila lebar layar maksimal adalah 640px. Kita modifikasi class container sehingga akan memiliki 7 baris dan 1 kolom. Kita sesuaikan tinggi tiap baris pada grid-template-rows. Kemudian kita atur agar lebar kolom 1fr yang berarti lebarnya akan penuh. Posisikan tiap komponen pada grid-template-areas.

Berikut tampilan mobile view:

Layout Web Mobile

Layout Web Mobile

Catatan Penting

  1. Penting untuk menyambungkan class dengan template layout yang sudah kita buat. Caranya dengan menambahkan properti grid-area pada class, yang sesuai dengan nama cell pada grid-template-areas.
  2. Apabila Anda berniat untuk mengosongkan cell, Anda dapat memberi nama cell dengan titik . pada grid-template-areas.

Dengan mengikuti tutorial ini, Anda telah berhasil untuk membuat layout web responsive dengan CSS Grid. Dengan fitur ini, akan meningkatkan pengalaman pengguna dan tentu meningkatkan traffic web Anda. Jangan ragu untuk menyesuaikan kode dengan kebutuhan proyek Anda. Selamat mencoba!

Referensi :

  1. Grid-template-areas
  2. @media query

Discussion (0)

Are you sure you want to delete this comment?

Replies to this comment, will also deleted. This action cannot be undone.

ID

:

Contain Replies

:

Comment Content

:

Please Login

Logo

Please Log in

Not registered? Register Now!