Bisnis Digital · Desain Antarmuka Web

Flexbox & CSS Grid: Merancang Tata Letak yang Adaptif

Sub‑CPMK: Menggunakan teknik Flexbox dan CSS Grid untuk menciptakan tata letak yang adaptif di berbagai ukuran layar — dari rancangan di Figma hingga kode yang berjalan di berbagai perangkat.

Indikator 1Menjelaskan perbedaan Flexbox dan CSS Grid.

Indikator 2Mengimplementasikan Flexbox untuk navigasi responsif.

Indikator 3Mengimplementasikan CSS Grid untuk layout produk.

Progres membaca materi 0%

1. Perbedaan Flexbox dan CSS Grid

Flexbox dan CSS Grid sama-sama modul CSS modern untuk mengatur tata letak (layout), tetapi keduanya lahir untuk menyelesaikan masalah yang berbeda. Secara ringkas, Flexbox dirancang untuk pengaturan elemen dalam satu dimensi — baik itu satu baris (row) atau satu kolom (column) — sedangkan CSS Grid dirancang untuk pengaturan elemen dalam dua dimensi sekaligus, yaitu baris dan kolom secara bersamaan.

Flexbox — Satu Dimensi

CSS Grid — Dua Dimensi

Header (span 3 kolom)

Aspek	Flexbox	CSS Grid
Dimensi	Satu dimensi (baris atau kolom)	Dua dimensi (baris dan kolom sekaligus)
Cara berpikir	Dari sisi konten — elemen mengalir dan menyesuaikan ruang yang tersedia	Dari sisi layout — kita menentukan kerangka grid dulu, baru menempatkan konten
Properti kunci	`display:flex`, `flex-direction`, `justify-content`, `align-items`, `flex-wrap`	`display:grid`, `grid-template-columns`, `grid-template-rows`, `gap`, `grid-column`
Cocok untuk	Navbar, tombol aksi, daftar tag, alignment mikro dalam satu komponen	Galeri produk, dashboard, struktur halaman besar (header–sidebar–konten–footer)
Kelemahan	Merepotkan bila butuh kontrol presisi dua dimensi sekaligus	Terasa berlebihan untuk komponen kecil yang hanya butuh satu baris elemen

Praktik terbaik yang umum dipakai industri: gunakan CSS Grid untuk kerangka besar halaman, lalu gunakan Flexbox di dalam setiap blok/komponen kecil di dalamnya. Keduanya tidak saling menggantikan, melainkan saling melengkapi.

Kombinasi Grid + Flexbox

/* Grid mengatur struktur besar halaman */ .layout { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; } /* Flexbox mengatur elemen di dalam sidebar */ .sidebar { display: flex; flex-direction: column; gap: 12px; }

2. Mengimplementasikan Flexbox untuk Navigasi Responsif

Navigasi (navbar) adalah kasus paling klasik untuk Flexbox: logo di kiri, menu di tengah/kanan, dan tombol aksi didorong ke ujung — semua dalam satu baris yang otomatis menyesuaikan lebar layar.

Studi Kasus

UMKM "Rumah Sulam Bundo" — Bukittinggi. Bundo memiliki usaha sulaman dan songket khas Minang yang baru membuka toko daring. Ia ingin navigasi situsnya menampilkan logo usaha, menu (Beranda, Produk, Tentang Kami, Kontak), dan tombol "Pesan Sekarang" yang selalu terlihat rapi baik di layar laptop admin toko maupun di HP pelanggan saat berbelanja dari pasar atau rumah.

Demo langsung (coba lebarkan/persempit jendela browser untuk melihat perilaku flex-wrap):

Perhatikan: tombol "Pesan Sekarang" otomatis terdorong ke kanan hanya dengan margin-left: auto — tanpa perlu menghitung jumlah kolom, seperti yang dibutuhkan jika memakai Grid.

HTML

<nav class="navbar"> <div class="brand">Rumah Sulam Bundo</div> <ul class="menu"> <li><a href="#">Beranda</a></li> <li><a href="#">Produk</a></li> <li><a href="#">Tentang Kami</a></li> <li><a href="#">Kontak</a></li> </ul> <button class="cta">Pesan Sekarang</button> </nav>

CSS

.navbar { display: flex; /* aktifkan flexbox */ align-items: center; /* rata tengah vertikal */ flex-wrap: wrap; /* boleh turun baris di layar kecil */ gap: 16px; padding: 14px 20px; background: #0b1f3a; } .menu { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; } .cta { margin-left: auto; /* dorong ke ujung kanan */ } /* Mobile: menu turun ke bawah logo & jadi vertikal */ @media (max-width: 640px) { .navbar { flex-direction: column; align-items: flex-start; } .menu { flex-direction: column; width: 100%; } .cta { margin-left: 0; width: 100%; } }

Contoh tambahan: pusat notifikasi ikon

Flexbox juga ideal untuk baris ikon aksi (keranjang, notifikasi, profil) yang perlu sejajar rapi:

.aksi-header { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }

3. Mengimplementasikan CSS Grid untuk Layout Produk

Ketika menampilkan katalog produk — baris dan kolom perlu diatur sekaligus agar rapi dan sejajar — inilah momen CSS Grid unggul dibanding Flexbox.

Studi Kasus

Katalog "Pasar Digital Jam Gadang" — Kuliner Khas Bukittinggi. Sebuah etalase daring menampilkan produk oleh-oleh khas: Karak Kaliang, Sanjai Balado, Bareh Randang, dan Kipang Kacang. Jumlah produk terus bertambah, dan tampilan harus tetap rapi baik di layar 4 kolom (desktop), 2 kolom (tablet), maupun 1 kolom (HP) — tanpa mengubah kode setiap kali produk baru ditambahkan.

Demo langsung (grid ini otomatis menyesuaikan jumlah kolom sesuai lebar layar):

🥨

Karak Kaliang

Rp 25.000

🌶️

Sanjai Balado

Rp 30.000

🍚

Bareh Randang

Rp 35.000

🥜

Kipang Kacang

Rp 20.000

HTML

<div class="grid-produk"> <div class="produk"> <img src="karak-kaliang.jpg" alt="Karak Kaliang"> <h4>Karak Kaliang</h4> <p>Rp 25.000</p> </div>  </div>

CSS

.grid-produk { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; } .produk { border: 1px solid #cfe0f3; border-radius: 10px; overflow: hidden; text-align: center; } .produk img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } /* Tanpa media query pun sudah responsif berkat auto-fit + minmax() */ /* Tapi bisa dipertegas breakpoint bila perlu kontrol lebih ketat: */ @media (max-width: 480px) { .grid-produk { grid-template-columns: 1fr; } } @media (min-width: 481px) and (max-width: 768px) { .grid-produk { grid-template-columns: repeat(2, 1fr); } }

Contoh tambahan: layout halaman dashboard admin toko

Grid area cocok untuk menyusun kerangka besar seperti dashboard admin UMKM (sidebar, header, konten, footer) dalam satu deklarasi:

.dashboard { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 64px 1fr 50px; grid-template-areas: "sidebar header" "sidebar konten" "sidebar footer"; min-height: 100vh; } .sidebar { grid-area: sidebar; } .header { grid-area: header; } .konten { grid-area: konten; } .footer { grid-area: footer; } @media (max-width: 700px) { .dashboard { grid-template-columns: 1fr; grid-template-areas: "header" "konten" "footer"; } .sidebar { display: none; } /* atau ubah jadi menu hamburger */ }

Indikator Tambahan: Dari Rancangan Figma ke Kode CSS

Sebelum menulis kode, tata letak biasanya dirancang lebih dulu di Figma menggunakan fitur Auto Layout. Kabar baiknya, konsep Auto Layout di Figma sangat mirip dengan Flexbox — sehingga menerjemahkan desain ke kode menjadi jauh lebih mudah jika kita memahami pemetaannya.

Sisipkan embed prototipe Figma Anda di sini.
Ganti komentar FIGMA_EMBED_URL pada kode di bawah dengan tautan share Figma (Share → Embed).

Fitur di Figma (Auto Layout)	Properti CSS setara
Direction: Horizontal / Vertical	`flex-direction: row / column`
Spacing between items	`gap`
Alignment (kiri/tengah/kanan)	`justify-content`
Alignment (atas/tengah/bawah)	`align-items`
Resizing: Fill container	`flex: 1` atau `width: 100%`
Frame dengan kolom & baris (grid manual)	`display: grid` + `grid-template-columns/rows`
Constraints (Left & Right / Scale)	`minmax()`, unit `%`/`fr`, `auto-fit`

Cara menyisipkan embed Figma di Blogger

Latihan Mandiri

Kerjakan bertahap sesuai indikator:

Rancang wireframe navbar dan grid katalog produk UMKM pilihan Anda di Figma menggunakan Auto Layout.
Implementasikan navbar tersebut menggunakan Flexbox, pastikan berubah menjadi tumpukan vertikal di layar HP.
Implementasikan grid katalog produk menggunakan CSS Grid dengan minimal 6 produk dan auto-fit + minmax().
Uji tampilan di 3 ukuran layar berbeda (mobile, tablet, desktop) menggunakan DevTools browser.

Referensi & Bacaan Lanjutan

Wibowo, A., & Putra, R. (2023). Implementasi Responsive Web Design menggunakan CSS Grid dan Media Queries.

Jurnal Teknologi Informasi dan Komunikasi, 12(2), 89–97.

Membahas bagaimana kombinasi CSS Grid Layout dengan media queries mempermudah pengembangan tampilan yang menyesuaikan otomatis ke berbagai ukuran perangkat, dari desktop hingga smartphone.

Implementasi Desain Responsif untuk Website UMKM dengan Framework Bootstrap.

Jurnal JTIK — journal.lembagakita.com

Pengujian heuristik oleh tiga validator terhadap landing page responsif UMKM menghasilkan skor kelayakan 95,76%, menunjukkan peningkatan signifikan pada kenyamanan navigasi & konsistensi tampilan di berbagai perangkat.

Santoso, M. F. Implementasi Konsep dan Teknik UI/UX dalam Rancang Bangun Layout Web dengan Figma.

Jurnal Infortech — ejournal.bsi.ac.id

Mengulas penerapan prinsip UI/UX pada perancangan layout web sejak tahap desain di Figma, sebelum diimplementasikan menjadi kode.

Perancangan Tampilan Antarmuka Situs Web UMKM Tupai Tech Menggunakan Figma.

ResearchGate — researchgate.net

Studi kasus perancangan antarmuka situs UMKM menggunakan Figma sebagai alat desain dan prototyping sebelum tahap pengembangan front-end.

Penggunaan Figma dan Metode Design Thinking dalam UI/UX untuk Website E-Commerce Pasar Grosir Tradisional. (2025).

Jurnal, Vol. 6, No. 4, hlm. 2199–2208.

Menguji hasil rancangan UI/UX pasar grosir tradisional dengan Figma kepada 15 calon pengguna dan memperoleh skor System Usability Scale kategori "Excellent", menunjukkan pentingnya tahap desain sebelum implementasi kode layout.

Kekuatan Flexbox dalam Desain Web Responsif Modern.

BINUS Digital — binus.ac.id

Membahas konsep main axis & cross axis pada Flexbox serta bagaimana kombinasinya dengan CSS Grid membentuk fondasi layout web modern.

Aditya, R. Grid vs Flexbox — perbedaan & studi kasus navigasi.

Medium — ramaadtym.medium.com

Membandingkan langsung pembuatan menu navigasi dengan Flexbox dan Grid, menunjukkan Flexbox lebih ringkas untuk mendorong elemen tunggal ke satu sisi menggunakan margin otomatis.

Exploring Flexbox and CSS Grid Layout.

IEEE TEMS Blog — ieee-tems-blogs.medium.com

Mengulas fitur, kasus penggunaan, dan kombinasi Flexbox dengan CSS Grid untuk membangun desain web yang dinamis dan responsif secara menyeluruh.

🔒 Token kehadiran akan muncul otomatis setelah Anda membaca materi ini minimal

3:00

Tetap buka halaman ini sampai waktu selesai.

✅ Token Kehadiran / Bukti Baca Materi

FLEXGRID-BDG26

Token disalin ✔

Batang Kayu

Tata Letak Adaptif: Flexbox & CSS Grid

Flexbox & CSS Grid: Merancang Tata Letak yang Adaptif