Cara Membuat Web Responsif dengan CSS Grid dan Flexbox

Ilustrasi Gambar Website. Sumber: komunikasipraktis.com

Cara Membuat Website Responsif

Website responsif adalah website yang bisa menyesuaikan tampilan halaman dengan berbagai ukuran layar yang berbeda-beda. Responsivitas menjadi hal yang penting untuk pengembangan web modern karena kebanyakan pengguna saat ini mengakses website menggunakan berbagai device seperti perangkat mobile dan tablet.

Dua cara populer yang digunakan untuk membuat website dengan layout responsif adalah CSS Flexbox dan CSS Grid. Flexbox lebih cocok digunakan untuk mengatur elemen dalam satu arah (baris atau kolom), sedangkan CSS Grid dirancang untuk layout dua dimensi (baris dan kolom sekaligus).

Apa Itu CSS Flexbox?

CSS Flexbox atau Flexible Box Layout adalah salah satu teknik layout di CSS yang digunakan untuk menyusun elemen agar lebih fleksibel dan responsif.

Flexbox adalah sistem tata letak CSS yang memudahkan pengaturan posisi, ukuran, jarak, dan perataan elemen dalam sebuah container. Dibandingkan metode lama seperti float atau positioning, Flexbox lebih fleksibel, sederhana, dan responsif, sehingga tampilan website bisa rapi dan mudah menyesuaikan berbagai ukuran layar.

Flex Container

display: flex - mengaktifkan flexbox pada container
flex-direction – menentukan arah elemen: row, row-reverse, column, column-reverse
justify-content - mengatur posisi flex item secara horizontal (flex-start, flex-end, center, space-between, space-around, space-evenly)
align-items – mengatur posisi elemen secara vertikal: center, flex-start, flex-end, stretch, baseline, normal.
flex-wrap – mengatur apakah elemen berpindah baris saat tidak muat: nowrap, wrap, wrap-reverse.
align-content – mengatur posisi beberapa baris saat menggunakan flex-wrap: center, stretch, flex-start, flex-end, space-around, space-between, space-evenly.

Flex Item

order – menentukan posisi elemen dalam susunan flex berdasarkan nilai yang diberikan
flex-grow – mengatur seberapa besar elemen melebar relatif terhadap elemen lain di dalam flex container
flex-shrink – mengatur seberapa besar elemen menyusut relatif terhadap elemen lain di dalam flex container
flex-basis - menentukan panjang awal flex item
flex (shorthand) - gabungan dari flex-grow, flex-shrink, flex-basis
align-self - mengatur alignment (perataan) khusus untuk item yang dipilih

Contoh Flexbox

Buat file html dan isi dengan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Flexbox</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="navbar">
    <div class="logo">LOGO</div>
    <div class="menu">
      <a href="#">Beranda</a>
      <a href="#">Tentang</a>
      <a href="#">Kontak</a>
    </div>
  </div>
</body>
</html>

Buat file css dan sambungkan dengan kode html di atas, lalu isi file tersebut dengan kode berikut:

body { margin: 0; font-family: Arial, sans-serif; }

.navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #4CAF50;
      padding: 11px 21px;
      color: white;
}

.menu {
      display: flex;
      gap: 15px;
}

.menu a { color: white; text-decoration: none; }

    /* Responsif */
@media (max-width: 600px) {
      .navbar { flex-direction: column; align-items: flex-start; }
      .menu { flex-direction: column; gap: 9px; }
}

Apa itu CSS Grid?

CSS Grid adalah sistem tata letak dua dimensi pada CSS yang memudahkan penyusunan elemen ke dalam baris dan kolom secara lebih terstruktur dan fleksibel.

Grid sangat cocok untuk membuat struktur layout halaman website (misalnya header, sidebar, konten, dan footer) karena mendukung kontrol penuh terhadap baris dan kolom.

Grid Container

display: grid - mengaktifkan grid pada container
grid-template-columns - menentukan jumlah kolom dan lebar ukurannya
grid-template-rows - menetukan tinggi setiap baris
gap (atau row-gap, column-gap) - mengatur jaral antar item grid
justify-content - mengatur seluruh grid secara horizontal
align-content - mengatur seluruh grid secara vertikal
grid-template-areas - membuat layout dengan nama area
justify-items - mengatur posisi item secara horizontal
align-items - mengatur posisi item secara vertikal

Grid Item

grid-column - menentukan posisi kolom item
grid-row - menentukan posisi baris item
grid-area - mengatur posisi item sesuai grid-template-areas
justify-self - mengatur posisi 1 item secara horizontal
align-self - mengatur posisi 1 item secara vertikal

Contoh Grid

Buat file html dan isi dengan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Galeri Grid</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
  </div>
</body>
</html>

Buat file css dan sambungkan dengan kode html di atas, lalu isi file tersebut dengan kode berikut:

body { margin: 0; font-family: Arial, sans-serif; }

    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      padding: 20px;
    }

    .box {
      background: #2196F3;
      color: white;
      padding: 30px;
      text-align: center;
      border-radius: 8px;
    }

    /* Responsif */
    @media (max-width: 768px) {
      .container { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 480px) {
      .container { grid-template-columns: 1fr; }
    }