Bí Quyết Xây Dựng Bento Grid Hoàn Hảo Bằng CSS Grid

Nếu bạn thường xuyên theo dõi các bài thuyết trình sản phẩm của Apple (như lễ ra mắt iPhone hay chip M-series), bạn chắc chắn đã thấy một phong cách thiết kế UI cực kỳ đặc trưng: Bento Box Layout.

Thay vì liệt kê tính năng thành các dòng nhàm chán, thông tin được đóng gói vào những ô vuông vức, bo góc tròn trịa, được xếp khít nhau như một hộp cơm Bento Nhật Bản. Phong cách này mang lại cảm giác hiện đại, gọn gàng và vô cùng thích mắt. Hôm nay, chúng ta sẽ học cách bẻ khóa (crack) cấu trúc này chỉ bằng vài dòng CSS thuần túy.

Bento Grid (hay Bento Box Layout) là một xu hướng UI/UX phổ biến. Nó được lấy cảm hứng từ hộp cơm Bento của Nhật Bản, nơi các phần thức ăn khác nhau được sắp xếp gọn gàng vào các ngăn có kích thước lớn nhỏ khác nhau nhưng tổng thể lại tạo thành một hình chữ nhật vừa vặn.

Đặc điểm nhận diện của thiết kế này:

• Các khối (Cards) có kích thước đa dạng (1x1, 2x1, 2x2,...).
• Bo góc (border-radius) thường khá lớn.
• Khoảng cách giữa các ô (gap) đồng đều hoàn hảo.
• Cấu trúc mang tính bất đối xứng nhưng vẫn giữ được sự ngăn nắp.

Rất nhiều người cố gắng làm Bento Layout bằng Flexbox. Nhưng tin tôi đi, đó là một cơn ác mộng. Flexbox sinh ra để quản lý layout một chiều (1D - theo hàng HOẶC theo cột). Khi bạn muốn một Card chiếm 2 hàng và 2 cột cùng lúc, Flexbox sẽ yêu cầu bạn phải lồng (nest) các thẻ `div` vào nhau cực kỳ phức tạp.

Ngược lại, CSS Grid được thiết kế chuyên biệt cho layout hai chiều (2D - cả hàng VÀ cột cùng lúc). Nó sinh ra chính xác là để làm những công việc này!

Bí quyết đầu tiên là chia không gian thành một tấm lưới (ví dụ lưới 3 cột) với các hàng có chiều cao tự động co giãn bằng nhau. Chúng ta dùng đơn vị phân số fr (fraction) của CSS Grid.

.bento-container {
  display: grid;
  /* Chia thành 3 cột bằng nhau */
  grid-template-columns: repeat(3, 1fr);
  /* Chiều cao mỗi hàng mặc định là tự động co giãn tối thiểu 200px */
  grid-auto-rows: minmax(200px, auto);
  /* Khoảng cách hoàn hảo giữa các ô cơm */
  gap: 16px;
}

/* Base style cho các khối Bento */
.bento-item {
  background: #f8f9fa;
  border-radius: 24px;
  padding: 24px;
}

Nếu chỉ dùng code trên, bạn mới có một cái lưới caro bình thường. Để tạo ra độ "Bento", bạn phải ra lệnh cho một số khối "bành trướng" chiếm nhiều diện tích hơn.

Trong CSS Grid, bạn dùng thuộc tính span:

/* Khối khổng lồ (Hero) chiếm 2 cột và 2 hàng */
.bento-large {
  grid-column: span 2;
  grid-row: span 2;
  background: #000;
  color: white;
}

/* Khối nằm ngang (Banner) chiếm 2 cột, 1 hàng */
.bento-wide {
  grid-column: span 2;
}

/* Khối nằm dọc (Sidebar) chiếm 1 cột, 2 hàng */
.bento-tall {
  grid-row: span 2;
}

Đôi khi, việc một khối chiếm 2 cột sẽ khiến nó không vừa với khoảng trống hiện tại của hàng đó. Lúc này, CSS Grid mặc định sẽ "đẩy" nó xuống hàng tiếp theo, để lại một khoảng lủng lỗ khổng lồ trên layout của bạn.

Để giải quyết "Lỗ hổng" này, CSS có một phép thuật tuyệt vời: grid-auto-flow: dense. Bạn chỉ cần thêm nó vào container:

.bento-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  grid-auto-flow: dense; /* Ma thuật nằm ở đây */
}

Khi dùng `dense`, thuật toán của CSS Grid sẽ tự động tìm các khối nhỏ (1x1) ở phía dưới và "hút" chúng ngược lên trên để lấp đầy những lỗ hổng do các khối lớn để lại. Kết quả là bạn luôn có một khối hình chữ nhật hoàn hảo, khít rịt không góc chết!

Trên màn hình điện thoại (Mobile), việc duy trì 3 cột sẽ làm nội dung bị thu lại quá nhỏ. Cách tốt nhất là bóp Bento Grid lại thành 1 cột duy nhất và xếp chúng chồng lên nhau như một dòng chảy bình thường.

@media (max-width: 768px) {
  .bento-container {
    /* Ép tất cả về 1 cột */
    grid-template-columns: 1fr;
  }
  
  /* Hủy bỏ mọi thiết lập bành trướng */
  .bento-large,
  .bento-wide,
  .bento-tall {
    grid-column: span 1;
    grid-row: span 1;
  }
}

Chỉ với vài thao tác cơ bản, bạn đã hoàn toàn làm chủ được Bento Grid Layout. Hãy tận dụng nó kết hợp với vài hiệu ứng gradient tinh tế để tạo ra những Landing Page ấn tượng nhé!