Bento Grid: Cara Susun Layout UI Modern yang Rapi

Verdict Cepat

Bento grid adalah cara menyusun antarmuka menjadi kotak-kotak modular berukuran beda dalam satu kanvas yang rapi. Format ini cocok saat konten beragam harus tampil sekaligus: statistik, gambar, teks singkat, dan tombol aksi. Paling efektif untuk dashboard, landing page produk, dan halaman portofolio. Kuncinya cuma dua, yaitu hierarki lewat ukuran sel dan konsistensi jarak serta sudut. Sisanya soal disiplin mengelompokkan konten sebelum menggambar. Artikel ini membahas prinsip penyusunan, contoh penerapan nyata, kode dasar CSS Grid, sampai daftar kesalahan yang paling sering muncul di proyek desain. Pola ini juga jadi favorit saya untuk menyusun ulang halaman yang terasa terlalu penuh.

Apa Itu Bento Grid

Nama bento grid diambil dari kotak makan Jepang bernama bento. Satu kotak, banyak kompartemen, tiap kompartemen berisi lauk yang berbeda tapi semuanya tertata rapat dan enak dilihat. Prinsip yang sama dipindahkan ke layar. Konten dipecah menjadi beberapa sel atau kartu, lalu disusun dalam satu grid besar dengan ukuran yang tidak seragam.

Bedanya dengan grid kartu biasa ada pada variasi ukuran. Grid kartu seragam menampilkan semua modul dengan dimensi identik, sehingga mata sulit menentukan mana yang paling penting. Bento grid justru memakai perbedaan ukuran sebagai alat komunikasi. Sel besar untuk informasi utama, sedang untuk pendukung, kecil untuk detail pelengkap. Istilah lain yang sering dipakai antara lain bento box UI, modular grid, dan tile layout.

Satu sel idealnya berisi satu pesan. Angka metrik, satu kutipan, satu fitur, atau satu ilustrasi. Saat setiap kotak punya tugas tunggal, pembaca bisa memindai seluruh layar dalam hitungan detik tanpa merasa kewalahan.

Dari Kotak Bekal ke Layar: Latar Belakang Singkat

Gagasan antarmuka berbasis ubin sebenarnya sudah lama. Bahasa desain Metro di Windows Phone 7 memopulerkan tile persegi dengan ukuran besar dan kecil sekitar awal dekade 2010. Gelombang kedua datang dari arah berbeda. Halaman produk Apple yang menyusun spesifikasi iPhone dan MacBook dalam bentuk kartu-kartu bersih membuat gaya ini melekat di benak banyak desainer pada kisaran 2023 hingga 2024.

Tahun berikutnya tren ini menguat karena dukungan teknologi sudah matang. CSS Grid stabil di semua browser modern, sementara framework utilitas seperti Tailwind CSS memangkas waktu pengerjaan layout modular dari hitungan jam menjadi hitungan menit. Situs kurasi seperti bentogrids.com dan galeri Dribbble kemudian mempercepat eksperimen para desainer dengan menyatukan ribuan referensi di satu tempat.

Per 2026, pola ini sudah keluar dari zona landing page. Dashboard analitik, aplikasi mobile, widget sistem operasi, sampai panel smart home ikut memakainya. Selain itu seluruhnya makin hidup karena berisi data real-time dan personalisasi. Riset tren dari UXPilot mencatat bento box sebagai salah satu pola dominan desain produk tahun ini, sementara Peterdraw menyebut adopsi oleh brand besar seperti Samsung, Netflix, dan Notion sebagai bukti bahwa gaya ini punya daya tahan, bukan sekadar mode lewat.

Kenapa Layout Ini Nempel di Mata

Kekuatan utama bento grid ada pada hierarki. Mata manusia mencari titik awal saat melihat sebuah layar. Sel berukuran paling besar secara otomatis terbaca sebagai prioritas, lalu pandangan turun ke sel yang lebih kecil. Desainer tidak perlu berteriak dengan warna neon untuk menunjukkan informasi penting, cukup memberi ruang lebih luas.

Baca juga:

Cara Membaca Brief Klien untuk Desainer: Panduan Praktis

Faktor kedua adalah pengelompokan. Prinsip kedekatan dalam psikologi Gestalt menyebut elemen yang berdekatan akan dipersepsikan sebagai satu kelompok. Kompartemen bento bekerja persis seperti itu. Statistik bounce rate ditempatkan di satu kotak, grafik pendapatan di kotak sebelah, daftar aktivitas terbaru di bawahnya. Otak pembaca tidak perlu menebak batas antar informasi karena garis dan ruang sudah menjelaskannya.

Faktor ketiga terasa dari ritmenya. Susunan kotak yang tidak simetris tapi tetap teratur memberi kesan dinamis tanpa jadi gaduh. Ada variasi, ada napas, namun semua tetap berada di satu sistem. Kombinasi ketenangan dan kejutan inilah yang membuat layar terasa dirancang manusia, bukan hasil template generik.

Bento Grid vs Grid Kartu Seragam vs Layout Bebas

Prinsip Menyusun Bento Grid yang Berhasil

Kelompokkan konten sebelum menggambar

Mulailah dari isi, bukan bentuk. Daftar semua elemen yang harus tampil, lalu satukan yang sejenis. Pertanyaannya sederhana: informasi mana yang secara alami saling berkaitan? Data pendukung boleh digabung dalam satu sel, data yang menuntut keputusan pantas berdiri sendiri. Kebiasaan membaca brief dengan teliti sangat membantu di tahap ini, dan panduan membaca brief klien untuk desainer membahas fondasinya lebih dalam.

Ukuran adalah hierarki

Tentukan satu hero cell, maksimal dua, yang memegang pesan terpenting. Sel ini dapat porsi area terluas, misalnya span enam kolom dari total dua belas. Sel pendukung dapat tiga sampai empat kolom, sisanya lebih kecil lagi. Kalau semua sel diperlakukan sama, grid kehilangan arah panduan dan kembali menjadi deretan kotak tanpa makna.

Satu sel satu pesan

Godaan menumpuk tiga ide dalam satu kotak besar selalu muncul, apalagi saat konten terasa sedikit. Tahan. Sel yang berisi dua pesan akan membingungkan prioritas dan membuat tinggi sel sulit dihitung. Kalau konten kurang, lebih baik tambah satu sel kecil daripada memadatkan isi sel lain.

Konsistensi lewat design token

Jarak antarsel, radius sudut, dan padding interior harus seragam di semua sel. Perbedaan dua piksel saja sudah terlihat miring bagi mata yang terlatih. Di sinilah design tokens berperan sebagai sumber nilai tunggal, dan tulisan tentang praktis design tokens untuk UI modern menjelaskan cara membangunnya. Satu nilai gap, satu radius, satu skala padding, dipakai di mana-mana.

Ruang kosong adalah bagian dari layout

Sel tidak wajib terisi penuh. Padding yang legam membuat isi sel terasa tenang dan premium, sementara sel yang padat menempel ke tepi langsung memberi kesan sesak. Perlakukan whitespace sebagai elemen aktif yang mengarahkan pandangan, bukan area terbuang.

Penerapan Nyata di Tiga Jenis Produk

Dashboard analitik. Pola klasik: metrik utama seperti pendapatan bulan ini menempati sel besar lengkap dengan grafik tren, metrik sekunder menempati sel sedang, dan log aktivitas atau catatan sistem menempati sel kecil di sisi lain. Platform customer service seperti Front memakai pendekatan ini untuk merangkum beban kerja, jam tersibuk, dan efisiensi dalam satu layar yang bisa dipahami sekali lihat.

Aplikasi mobile. Ruang layar ponsel sempit, jadi bento di mobile biasanya hadir sebagai barisan horizontal yang bisa digeser atau susunan bertingkat. Aplikasi streaming seperti Netflix menyusun kategori konten dalam blok modular, sementara widget cuaca, kalender, dan kontrol pintar di layar utama iOS maupun Android pada dasarnya adalah bento grid versi sistem operasi.

Landing page dan portofolio. Halaman produk memakai sel besar untuk demo fitur unggulan dan sel kecil untuk badge penghargaan atau testimoni singkat. Portofolio di Behance dan Dribbble sering memakai susunan asimetris untuk memadukan proyek besar dan eksperimen kecil dalam satu halaman. Sentuhan gerak kecil seperti efek hover pada tiap sel menambah kesan hidup, dan ragam penerapannya bisa ditelusuri di artikel tentang micro interactions untuk UX.

Implementasi Teknis dengan CSS Grid

Fondasi teknisnya cukup satu properti display grid. Kerangka paling umum memakai dua belas kolom karena mudah dibagi menjadi setengah, sepertiga, dan seperempat lebar. Contoh minimal:

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.sel-hero   { grid-column: span 6; grid-row: span 2; }
.sel-sedang { grid-column: span 3; }
.sel-kecil  { grid-column: span 3; }

@media (max-width: 768px) {
  .sel-hero, .sel-sedang, .sel-kecil { grid-column: span 12; }
}

Nilai gap menjadi jarak antarsel, dan angka span menentukan lebar tiap sel. Pada layar di bawah 768 piksel semua sel diperlebar menjadi satu kolom penuh sehingga susunan otomatis menumpuk ke bawah. Urutan DOM menentukan urutan baca, jadi pastikan hero cell ditulis paling awal di markup. Dokumentasi resmi di MDN tentang CSS Grid Layout membahas properti span dan area jauh lebih lengkap untuk kasus lanjutan seperti penataan baris implisit.

Pengguna Tailwind CSS bisa mencapai hasil serupa tanpa menulis stylesheet khusus. Kelas grid grid-cols-12 dan gap-6 membentuk kerangkanya, lalu col-span-6 row-span-2 menerjunkan hero cell ke dalam grid. Pendekatan utility ini mempercepat iterasi karena perubahan ukuran sel cukup lewat penggantian kelas, bukan penulisan aturan baru.

Kesalahan Umum yang Membuat Bento Grid Berantakan

Semua sel sama besar. Kesalahan paling sering. Begitu setiap kotak mendapat dimensi identik, hierarki lenyap dan hasilnya tidak jauh beda dengan grid kartu biasa yang membosankan. Berani bedakan ukuran.

Jumlah sel kelewat batas. Memaksakan sepuluh sampai lima belas kotak dalam satu layar desktop membuat tiap sel menyusut dan isi terasa sesak. Batas sehat di desktop biasanya empat sampai delapan sel. Konten sisanya pindah ke halaman detail atau tab berikutnya.

Isi tidak sepadan dengan ukuran sel. Sel raksasa berisi dua baris teks terasa kosong, sel mungil berisi tabel panjang terasa tersedak. Sesuaikan bobot isi dengan luas sel, atau tukar posisi keduanya.

Radius dan jarak tidak konsisten. Sudut sel satu delapan piksel, sebelahnya enam belas piksel, jarak antarbaris berubah ubah. Ketidakseragaman sekecil ini jarang terlihat satu per satu, tapi hasil akhirnya langsung terasa kurang profesional. Kunci semua nilainya ke token.

Kotak dekoratif tanpa fungsi. Mengisi ruang dengan kotak berisi gradien atau animasi tanpa informasi membuat pembaca mencari arti yang tidak ada. Setiap sel harus menjawab satu kebutuhan nyata pengguna.

Lupa menguji di layar kecil. Hero cell yang megah di desktop bisa menjelma menara tinggi tak berujung di ponsel. Selalu cek perilaku tumpukan, termasuk urutan baca setelah semua sel melebar penuh.

Aksesibilitas jadi korban terakhir. Kontras teks di atas kartu bergambar sering jatuh di bawah standar WCAG, alt text dilupakan, navigasi keyboard tercekat di sel interaktif tanpa indikator fokus. Gaya secanggih apa pun tidak menolong kalau sebagian pengguna tidak bisa memakainya.

Tools dan Sumber Inspirasi

Figma menjadi tempat latihan paling murah. Aktifkan layout grid dengan kolom dua belas, manfaatkan auto layout untuk menjaga padding konsisten, lalu susun ulang sel sampai hierarkinya terasa pas. Untuk produksi web, komponen bento siap pakai tersebar di library Tailwind dan marketplace template. Galeri bentogrids.com mengumpulkan contoh nyata dari produk sungguhan, sementara pencarian kata kunci bento grid di Dribbble dan Muzli menghadirkan ribuan eksplorasi konsep.

Latihan yang menurut saya paling cepat membuang hasil: ambil satu layar aplikasi favorit, daftar lima konten terpentingnya, lalu susun ulang sebagai bento grid dengan hero cell yang jelas. Bandingkan dengan versi aslinya, catat perbedaan keputusan, dan ulangi dengan layar lain. Konsistensi visual seperti yang dipraktikkan desainer saat merapikan feed Instagram lewat Canva, yang dibahas tuntas di panduan feed Instagram konsisten dengan Canva, terbukti membantu mempertajam insting komposisi juga di sini.

Penutup: Mulai dari Satu Layar

Bento grid bukan sihir, hanya disiplin pengelompokan dan keberanian menetapkan prioritas lewat ukuran. Saya sering melihat tim langsung membuka tool desain dan menyeret kotak tanpa daftar konten, lalu bertanya kenapa hasilnya terasa ramai. Balik urutannya. Kelompokkan isi, pilih hero, kunci token jarak, baru gambar. Satu layar yang berhasil sudah cukup untuk membawa nuansa baru ke produk.

Pilih satu halaman milik sendiri minggu ini, misalnya dashboard internal atau halaman utama portofolio, lalu susun ulang dengan lima prinsip di atas. Bagikan hasil sebelum dan sesudahnya ke tim atau komunitas desain, diskusi yang muncul biasanya lebih berharga dari tutorial apa pun. Kalau masih tahap meriset kebutuhan pengguna sebelum menggambar, mulai dari membedah brief dengan benar, sisanya akan jauh lebih lancar.