F8
Quay lại
Đang tải...

Ếch Trendy

Cùng chú ếch nhỏ khám phá thế giới Web đầy biến động. Cập nhật trending nhanh như cách ếch đớp mồi! ⌨️🌿

0

Bento Grid Layouts: Xu Hướng Thiết Kế Web 2026 Tăng Tỷ Lệ Chuyển Đổi Cho Dev Việt

Ếch Trendy
Ếch Trendy

7 tháng trước · 9 phút đọc

Bento grid là gì và tại sao nó đang "chiếm" UI 2026?

Bạn có bao giờ mở trang chủ của Apple, Linear hay Vercel và tự hỏi tại sao layout của họ nhìn vừa gọn vừa có chiều sâu không? Câu trả lời: Bento Grid.

Cái tên xuất phát từ hộp cơm bento của Nhật - mỗi ngăn chứa một thứ khác nhau, kích thước khác nhau, nhưng tổng thể trông rất cân đối. Bento grid áp dụng đúng triết lý đó vào web: thay vì các ô đều tăm tắp, bạn có những card kích thước không đều, mỗi card chiếm một "trọng lượng" khác nhau trong layout.

Trước năm 2023, pattern này chủ yếu thấy trên UI kit và Dribbble. Từ 2024-2025, nó bắt đầu xuất hiện trên production thật - landing page, dashboard, portfolio, app mobile. Theo các báo cáo UI trend từ Dribbble và Awwwards, bento grid nằm trong top 5 pattern được sử dụng nhiều nhất trong 2024-2025. Đây không chỉ là trend thẩm mỹ. Bento grid giải quyết một vấn đề thực tế: làm thế nào để người dùng quét qua nhiều thông tin mà không cảm thấy bị choáng ngợp.

342221 Card lớn = nội dung quan trọng - hierarchy được mã hóa thẳng vào kích thước

Một card 2x2 chiếm diện tích gấp 4 lần card 1x1. Người mắt nhìn vào sẽ tự động ưu tiên đọc nó trước. Không cần màu sắc nổi bật, không cần hiệu ứng animation phức tạp - kích thước nói thay tất cả. Đó là lý do các SaaS product hiện đại chuyển sang pattern này cho trang features và pricing.

Implement bento grid với CSS Grid thuần - từ zero đến production

Đừng cài thêm thư viện. CSS Grid đã đủ mạnh để làm toàn bộ.

Cấu trúc cơ bản là một grid 4-6 cột đều nhau, các card tự khai báo mình muốn chiếm bao nhiêu cột/hàng:

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 cột đều */
  grid-auto-rows: 160px;                 /* chiều cao hàng cố định */
  gap: 1rem;
}

/* Card lớn - chiếm 2 cột, 2 hàng */
.card-hero {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

/* Card rộng - chiếm 2 cột, 1 hàng */
.card-wide {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

/* Card nhỏ - 1x1 */
.card-sm {
  grid-column: span 1;
  grid-row: span 1;
}

Vấn đề của cách trên? Khi thêm/xóa card, bạn phải tính lại tọa độ thủ công. Cách xử lý thực tế hơn là dùng grid-column: span N thay vì tọa độ tuyệt đối, để browser tự sắp xếp:

/* Browser tự quyết định vị trí, bạn chỉ khai báo kích thước */
.card-2x2 { grid-column: span 2; grid-row: span 2; }
.card-2x1 { grid-column: span 2; grid-row: span 1; }
.card-1x2 { grid-column: span 1; grid-row: span 2; }
.card-1x1 { grid-column: span 1; grid-row: span 1; }

Kết hợp với grid-auto-flow: dense, browser sẽ tự lấp đầy các khoảng trống thay vì để ô trống xấu:

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
  grid-auto-flow: dense; /* lấp khoảng trống tự động */
  gap: 1rem;
}

342222 grid-auto-flow: dense là thứ biến layout lộn xộn thành bento hoàn chỉnh

Responsive thì đơn giản - chỉ cần điều chỉnh số cột theo breakpoint:

@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 cột trên tablet */
  }
}

@media (max-width: 480px) {
  .bento-grid {
    grid-template-columns: 1fr; /* 1 cột trên mobile */
  }
  /* Card to cũng co lại */
  .card-2x2, .card-2x1 {
    grid-column: span 1;
    grid-row: span 1;
  }
}

Một điểm hay: khi co về mobile, card nào cũng thành span 1 - tức là stack dọc tự nhiên, không bị vỡ layout.

Tailwind CSS: cách nhanh nhất để prototype bento grid

Nếu bạn đang dùng Tailwind (và hầu hết project React/Next.js hiện đại đều dùng), implement bento grid nhanh hơn nhiều so với viết CSS thuần.

Tailwind v3+ có sẵn các utilities col-span-*, row-span-*, grid-cols-* - đủ để build bento không cần custom CSS:

<div class="grid grid-cols-4 auto-rows-[160px] gap-4 p-6">
  
  <!-- Card lớn: 2 cột x 2 hàng -->
  <div class="col-span-2 row-span-2 bg-gradient-to-br from-blue-500 to-blue-700
              rounded-2xl p-6 shadow-lg flex flex-col justify-between">
    <span class="text-white/60 text-sm">Sản phẩm nổi bật</span>
    <h2 class="text-white text-2xl font-bold">Áo thun premium</h2>
  </div>

  <!-- Card rộng: 2 cột x 1 hàng -->
  <div class="col-span-2 row-span-1 bg-emerald-500
              rounded-2xl p-5 shadow-lg">
    <p class="text-white font-semibold">Flash sale hôm nay -30%</p>
  </div>

  <!-- Card nhỏ: 1 cột x 1 hàng -->
  <div class="col-span-1 row-span-1 bg-purple-500
              rounded-xl p-4 shadow-md">
    <p class="text-white text-sm">4.9 ★</p>
  </div>

  <!-- Card cao: 1 cột x 2 hàng -->
  <div class="col-span-1 row-span-2 bg-orange-400
              rounded-2xl p-5 shadow-lg">
    <p class="text-white font-bold">Mới về</p>
  </div>

</div>

Responsive với Tailwind thì chỉ cần prefix:

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 auto-rows-[140px] gap-3">
  <!-- Mobile: 1 cột → Tablet: 2 cột → Desktop: 4 cột -->
</div>

342223 Responsive prefix của Tailwind giúp bento tự co về mobile mà không cần viết media query

Một số utility hay dùng kèm:

  • aspect-ratio (aspect-square, aspect-video): giữ tỉ lệ card khi chiều cao tự động
  • overflow-hidden + group-hover: hiệu ứng hover card đẹp mà không cần JS
  • backdrop-blur + bg-white/10: glass morphism effect cho card trên nền tối

Tailwind v4 (đang release) push container queries mạnh hơn - thay vì breakpoint toàn trang, bạn có thể làm card responsive theo kích thước container cha. Điều này khá lợi cho bento grid dạng widget, nhúng vào dashboard dạng module.

Xem thêm cách sử dụng grid utilities tại Tailwind CSS Grid Utilities.

Ứng dụng thực tế: portfolio và e-commerce Việt

Lý thuyết đủ rồi. Mình chia sẻ 2 case thực tế mà pattern bento grid phù hợp nhất với dev Việt đang build.

Case 1: Portfolio dev/designer

Vấn đề của portfolio dạng list truyền thống: mọi project trông ngang hàng nhau, không có cái nào nổi bật. Bento grid fix điều này bằng cách cho phép bạn "pin" 1-2 project quan trọng nhất thành card to, còn lại thành card nhỏ.

Layout gợi ý cho portfolio 6 project:
┌──────────────┬──────┬──────┐
│ Project chính│ Skill│ Blog │
│  (2x2)       │ (1x1)│ (1x1)│
├──────┬───────┤      │      │
│ Proj │ Proj  ├──────┴──────┤
│ (1x1)│ (1x1) │ Project mới │
│      │       │  (2x1)      │
└──────┴───────┴─────────────┘

Card 2x2 dành cho project flagship (để URL, screenshot lớn, tech stack). Card nhỏ hơn cho side projects và blog posts. Hiring manager nhìn vào biết ngay bạn tự hào nhất về cái gì.

Case 2: Landing page e-commerce

Bento grid đặc biệt hợp với trang features hoặc social proof section. Thay vì list 6 bullet points nhàm chán, bạn có thể:

  • Card lớn: ảnh sản phẩm hero + giá + CTA button
  • Card nhỏ: rating sao (4.8/5 từ 1200 đánh giá)
  • Card nhỏ: badge "Giao hàng 2h HCM"
  • Card rộng: testimonial 1-2 câu
  • Card nhỏ: số lượng đã bán "12.000+ khách hàng"

342224 Bento grid biến social proof thành visual story thay vì danh sách liệt kê

Thực tế, Placing CTAs above the fold can boost conversions by 317% (Keywords Everywhere - Conversion Rate Optimization Stats) khi tổ chức social proof theo hierarchy rõ ràng (thay vì list đều), tỉ lệ đọc đến CTA tăng đáng kể. Lý do đơn giản: người dùng không phải đọc tuyến tính từ trên xuống - họ quét qua và tự chọn điểm quan tâm.

Tải về template bento grid dưới đây để bắt đầu nhanh hơn: Tải Bento Grid Template HTML

Những lỗi thường gặp và cách tránh

Theo khảo sát State of CSS 2024, phần lớn dev mới implement bento grid mắc ít nhất một trong ba lỗi sau.

Lỗi 1: Mọi card đều có cùng màu sắc

Bento grid cần màu sắc để phân biệt nhóm nội dung. Nếu tất cả card màu trắng với viền xám, bạn đang làm grid thông thường, không phải bento. Giải pháp: nhóm card theo chức năng và gán màu nền nhẹ - analytics thì xanh dương, social proof thì vàng, CTA thì cam/đỏ.

Lỗi 2: Card lớn nhưng nội dung không tương xứng

Card 2x2 mà chỉ đặt 2 dòng text ngắn trông rất "rỗng". Card to cần nội dung to: ảnh sản phẩm, chart, video thumbnail, hoặc typography lớn. Nếu nội dung nhỏ thì dùng card nhỏ.

Lỗi 3: Không test mobile trước

Desktop layout đẹp nhưng mobile bị vỡ là lỗi phổ biến nhất. Rule đơn giản: luôn design mobile-first, sau đó expand lên desktop. Với Tailwind, viết class không prefix trước (mobile), rồi thêm md: và lg: sau.

/* Đừng làm thế này */
.grid { grid-template-columns: repeat(4, 1fr); } /* desktop first → mobile vỡ */

/* Làm thế này */
.grid { grid-template-columns: 1fr; } /* mobile first */
@media (min-width: 768px) { .grid { grid-template-columns: repeat(4, 1fr); } }

342225 Mobile-first không chỉ là best practice - với bento grid nó là bắt buộc

Lỗi 4: Bỏ qua accessibility

Các card bento thường dùng div với background image, không có alt text. Screen reader sẽ bỏ qua toàn bộ nội dung hình ảnh. Fix đơn giản: dùng thẻ <article> cho từng card, đặt aria-label mô tả nội dung, và đảm bảo contrast ratio tối thiểu 4.5:1 giữa text và background.

<!-- Thay vì -->
<div class="col-span-2 row-span-2 bg-blue-500">...</div>

<!-- Dùng -->
<article class="col-span-2 row-span-2 bg-blue-500" aria-label="Sản phẩm nổi bật tháng này">
  ...
</article>

Tham khảo thêm ví dụ bento grid thực tế từ các landing page đẹp: Lapa.ninja - Landing Page Inspiration.

Checklist trước khi ship bento grid lên production

Sau khi build xong, chạy qua checklist này trước khi deploy:

Visual

  • [ ] Có ít nhất 1 card lớn làm focal point
  • [ ] Màu sắc phân biệt nhóm nội dung rõ ràng
  • [ ] Contrast ratio text/background ≥ 4.5:1
  • [ ] Card không bị "rỗng" (nội dung tương xứng kích thước)

Responsive

  • [ ] Test trên mobile 375px (iPhone SE)
  • [ ] Test trên tablet 768px
  • [ ] Không có horizontal scroll bất ngờ
  • [ ] Card span co lại đúng khi về mobile

Accessibility

  • [ ] Card dùng thẻ semantic (article, section)
  • [ ] Có aria-label cho card không có heading
  • [ ] Ảnh nền có role="img" + aria-label
  • [ ] Kiểm tra với keyboard navigation

Performance

  • [ ] Ảnh trong card dùng loading="lazy"
  • [ ] Không dùng height: 100vh cứng trên mobile
  • [ ] Animate card bằng transform thay vì margin/padding

342226 Checklist này mình rút ra từ 3 lần deploy bị bug production - đau đủ chỗ rồi mới nhớ

Tải về checklist đầy đủ dạng markdown để dùng trong project của bạn: Tải Checklist Bento Grid

Giờ bạn đã có đủ để bắt tay vào làm. Bước tiếp:

  1. Clone template HTML ở section trên về, mở trong browser
  2. Thay nội dung bằng project/sản phẩm thật của bạn
  3. Chạy checklist trước khi push lên staging

Bạn build bento grid cho loại project nào - portfolio, dashboard hay e-commerce? Drop comment, mình có thể gợi ý layout cụ thể hơn.

0
Tailwind CSSBento GridUI DesignCSS GridWeb Layout