Grid layout: thứ khiến Flexbox phải nể

Demo trực quan: điều khiển Grid theo thời gian thực

Khối demo dưới đây cho phép bạn thay đổi số cột, kích thước cột, số hàng, kích thước hàng và khoảng cách. Bạn sẽ thấy ngay sự khác biệt giữa Grid và Flexbox: mọi thứ được sắp xếp theo cả hai chiều, không còn cảm giác “xếp từng hàng rồi xuống dòng”.

1. Grid sinh ra để làm gì?

CSS Grid được thiết kế để giải quyết bài toán bố cục hai chiều: vừa quản lý hàng, vừa quản lý cột. Khác với Flexbox vốn chỉ “mạnh tay” trên một trục, Grid cho bạn khả năng:

• Dựng layout tổng thể của cả trang.
• Chia vùng nội dung thành các ô chính xác.
• Kiểm soát vị trí item theo tọa độ (hàng, cột).

Nếu Flexbox giống như xếp đồ vật theo hàng trên kệ, thì Grid giống như vẽ sẵn một bản đồ ô vuông rồi đặt từng món đồ vào đúng ô.

2. Cách khởi tạo một Grid cơ bản

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 16px;
}

• display: grid: kích hoạt Grid.
• grid-template-columns: định nghĩa số cột.
• grid-template-rows: định nghĩa hàng.
• gap: khoảng cách giữa các ô.

Chỉ với bốn dòng, bạn đã có một hệ thống lưới hoàn chỉnh, linh hoạt hơn rất nhiều so với việc phải tính toán độ rộng từng phần tử bằng Flexbox.

3. Đơn vị fr: vũ khí bí mật của Grid

Đơn vị fr đại diện cho phần không gian còn lại trong container. Nó giúp bạn chia cột theo tỷ lệ thay vì theo pixel cứng.

grid-template-columns: 1fr 2fr 1fr;

Dòng trên tạo ra ba cột, trong đó cột giữa rộng gấp đôi hai cột còn lại. Đây là cách tạo layout tỉ lệ cực kỳ nhanh, không cần tính toán thủ công.

4. minmax: giới hạn nhưng vẫn linh hoạt

minmax() cho phép bạn đặt giới hạn kích thước tối thiểu và tối đa cho mỗi cột hoặc hàng.

grid-template-columns: repeat(4, minmax(150px, 1fr));

Cách này rất phù hợp cho layout responsive: mỗi cột không bao giờ nhỏ hơn 150px, nhưng vẫn được phép giãn ra khi không gian cho phép.

5. Đặt vị trí item theo tọa độ hàng – cột

Điểm khiến Grid “ăn đứt” Flexbox là khả năng đặt item vào vị trí chính xác:

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

Đoạn trên đặt item chiếm từ cột 1 tới cột 2, nằm ở hàng 1. Bạn không cần quan tâm thứ tự HTML, chỉ cần quan tâm tọa độ trong hệ lưới.

6. Khi nào nên dùng Grid thay cho Flexbox?

• Layout trang chủ, dashboard, admin panel.
• Bố cục dạng magazine, card grid nhiều chiều.
• Khi bạn cần kiểm soát cả hàng lẫn cột.

Flexbox vẫn rất mạnh trong việc canh hàng ngang, canh giữa, chia không gian trong một dòng. Nhưng khi bài toán chuyển sang kiểu “bảng ô” hai chiều, Grid là lựa chọn tự nhiên hơn, gọn hơn và dễ đọc hơn.

7. So sánh nhanh Grid và Flexbox

• Flexbox: tư duy một chiều, phù hợp component nhỏ.
• Grid: tư duy hai chiều, phù hợp layout tổng thể.
• Flexbox mạnh về canh giữa và phân bố trên một trục.
• Grid mạnh về định hình bố cục lai ghép nhiều vùng.

8. Kết luận

CSS Grid không thay thế Flexbox, nhưng nó mở ra một cách tư duy hoàn toàn mới về bố cục. Khi bạn đã quen với fr, minmax, grid-template và cách đặt item theo tọa độ, việc dựng layout phức tạp sẽ trở nên nhẹ nhàng và có hệ thống hơn rất nhiều. Flexbox giỏi, nhưng Grid mới là thứ khiến Flexbox phải nể trong những bài toán bố cục lớn.