Grid layout là gì: hệ thống kẻ lưới trước khi đặt bất kỳ thứ gì vào trang
Grid layout (bố cục lưới) là một hệ thống chia trang thành cột và hàng để designer và developer biết chính xác đặt nội dung ở đâu. Thay vì ước lượng “trông có vẻ căn giữa” hay “chỗ này rộng vừa”, grid đặt ra quy tắc rõ ràng: trang có bao nhiêu cột, mỗi cột rộng bao nhiêu, khoảng cách giữa chúng là bao nhiêu.
Kết quả nhìn thấy được: các phần tử trên trang căn theo cùng một hệ trục vô hình. Header, card sản phẩm, ảnh, đoạn text đều “ngồi” trên các điểm quy chiếu chung. Người xem không thấy lưới đó nhưng cảm nhận được sự trật tự, và ngược lại, khi grid bị phá vỡ thì họ cảm thấy “có gì đó sai” mà không chỉ ra được cụ thể.
Grid xuất hiện trong thiết kế web ở nhiều tầng: tầng thiết kế (Figma có Grid Overlay để designer kẻ lưới khi đặt thành phần), tầng CSS (CSS Grid và Flexbox triển khai grid trong code), và tầng wireframe (xem thêm bài wireframe là gì để hiểu grid được dùng ngay từ bước phác thảo).
Grid layout và Flexbox: không phải cạnh tranh nhau, mà giải quyết hai bài toán khác nhau
Đây là câu hỏi nhiều người hỏi theo hướng sai: “dùng grid hay flexbox?”. Sai đề vì hai thứ này không thay thế nhau, chúng giải quyết hai bài toán bố cục khác nhau.
| Tiêu chí | CSS Grid | Flexbox |
|---|---|---|
| Chiều | Hai chiều: kiểm soát cả cột lẫn hàng cùng lúc | Một chiều: hoặc theo hàng ngang, hoặc theo cột dọc |
| Dùng khi | Bố cục toàn trang, khu vực phức tạp nhiều hàng nhiều cột | Căn chỉnh một dòng phần tử: menu ngang, hàng icon, nút nhóm lại |
| Ví dụ thực tế | Lưới card sản phẩm 3 cột, trang có sidebar và nội dung chính | Hàng điều hướng trên header, nhóm nút “Mua ngay / Thêm vào giỏ” |
| Nhược điểm | Phức tạp hơn khi chỉ cần căn một hàng đơn giản | Không phù hợp khi cần kiểm soát cả hai chiều cùng lúc |
Trong một dự án thực tế, Grid và Flexbox thường dùng chung: Grid kẻ bộ khung toàn trang (header, sidebar, main, footer), Flexbox căn chỉnh các phần tử bên trong từng ô của grid đó.
Cột, rãnh và lề: ba thứ tạo nên một grid, không phải chỉ có cột
Một grid thường được mô tả bằng số cột, nhưng thực tế grid gồm ba thành phần riêng biệt, mỗi thứ có vai trò khác nhau và không được lẫn lộn.
Cột (column) là vùng đặt nội dung. Nội dung web luôn nằm trong cột, không nằm trong rãnh hay lề.
Rãnh (gutter) là khoảng cách giữa hai cột liên tiếp. Rãnh tạo ra khoảng thở giữa các phần tử, tránh mọi thứ bị dính vào nhau. Không đặt nội dung vào rãnh.
Lề (margin) là khoảng cách hai bên ngoài cùng, ngăn nội dung chạm sát viền trình duyệt. Trên mobile, lề thường nhỏ hơn desktop để tận dụng tối đa màn hình hẹp.
Rãnh thường được thiết lập theo đơn vị cố định như 16px, 24px hoặc 32px và đồng bộ toàn site. Khoảng cách giữa card sản phẩm và khoảng cách giữa hình ảnh blog vì vậy bằng nhau, tạo ra nhịp thị giác đều đặn. Khi bạn thấy một trang trông gọn gàng mà không rõ tại sao, thường là rãnh đang được giữ nhất quán, không phải do tác giả có khiếu thẩm mỹ bẩm sinh.
Hệ thống 12 cột phổ biến vì 12 chia hết cho 2, 3, 4 và 6 mà không có phân số. Điều đó cho phép bố cục linh hoạt: một nội dung chiếm 12 cột thì full-width, sidebar chiếm 4 cột thì nội dung chính có 8 cột, ba card ngang nhau thì mỗi card 4 cột.
Grid 12 cột và hệ thống tùy chỉnh: 12 cột không phải lúc nào cũng đúng nhất
12 cột phổ biến không có nghĩa là chuẩn mực bắt buộc. Có những trường hợp hệ thống khác phù hợp hơn.
| Hệ thống | Điểm mạnh | Điểm yếu | Phù hợp |
|---|---|---|---|
| 12 cột | Linh hoạt, chia được nhiều tỉ lệ. Nhiều framework CSS (Bootstrap, Tailwind) mặc định 12 | Với layout đơn giản thì 12 cột có thể thừa | Website doanh nghiệp, thương mại điện tử, blog nhiều cột |
| 8 cột | Gọn hơn, dễ kiểm soát hơn cho layout không quá phức tạp | Ít linh hoạt hơn khi cần chia nhỏ hơn 1/4 | App di động, trang đọc bài dài, giao diện minimalist |
| Tùy chỉnh | Hoàn toàn khớp với thiết kế cụ thể | Mất thời gian thiết lập, không dùng được framework có sẵn | Dự án có bộ nhận diện mạnh, cần bố cục độc đáo hoàn toàn |
Khi nào nên thoát khỏi 12 cột? Khi layout thực sự yêu cầu tỉ lệ mà 12 cột không chia được gọn, hoặc khi thiết kế có nhịp riêng (như 5 phần tử ngang nhau) thì 10 hay 20 cột phù hợp hơn. Không phải mọi thứ cũng cần ép vào 12 cột.
Grid layout responsive: bố cục thay đổi thế nào khi màn hình thu nhỏ
Một trong những điểm mạnh của grid là khả năng co giãn theo màn hình. Cùng một nội dung, grid responsive cho phép hiển thị ba cột trên desktop, hai cột trên tablet và một cột trên mobile mà không cần viết lại nội dung.
Cách hoạt động: CSS Grid dùng media query (điểm ngắt theo chiều rộng màn hình) để đổi số cột. Ở 1024px trở lên thì ba cột, từ 768px đến 1024px thì hai cột, dưới 768px thì một cột. Nội dung không đổi, chỉ cách sắp xếp thay đổi.
Grid cũng quyết định phần nào người dùng thấy đầu tiên khi vào trang (liên quan tới khái niệm above the fold): trên desktop nhiều cột thì nhiều card hiện ngay, trên mobile một cột thì chỉ vài phần tử đầu tiên lọt vào màn hình. Đây là lý do team thiết kế luôn phải xem grid ở cả ba kích thước trước khi duyệt.
Một điểm hay bị bỏ qua: grid trên mobile không chỉ là “1 cột”. Cột đó vẫn có lề và rãnh. Lề trên mobile nếu quá nhỏ thì nội dung sát viền màn hình trông ẩu. Lề quá rộng thì chiều rộng thực dụng còn quá hẹp, chữ và ảnh co lại. Đây là lý do team thiết kế phải kiểm tra lề và rãnh ở kích thước mobile riêng, không chỉ xem số cột.
Người không làm thiết kế cần hiểu grid để làm gì?
Khi duyệt file Figma hay xem bản thiết kế, bật Grid Overlay lên sẽ thấy lưới kẻ phía sau. Nếu một phần tử nào đó không “ngồi” trên cột, không căn theo lưới, đó là dấu hiệu cần xem lại. Bạn không cần biết code, chỉ cần nhận ra “cái này trông lệch” là đủ để phản hồi đúng chỗ.
Khi feedback “trang trông lộn xộn”, thường vấn đề nằm ở một trong hai: grid không nhất quán (phần tử đặt ở nhiều vị trí không theo quy tắc) hoặc rãnh quá nhỏ (các phần tử dính vào nhau thiếu khoảng thở). Biết điều này giúp bạn nói cụ thể hơn thay vì chỉ nói cảm tính.
Grid cũng ảnh hưởng tới quyết định về chiều sâu trang. Trang có nhiều cột thì thông tin phân ra ngang, người đọc không cần cuộn xuống nhiều. Trang một cột thì nội dung dài hơn theo chiều dọc. Cả hai cách đều có trường hợp phù hợp, không cái nào tốt hơn cái nào tuyệt đối. Khi bạn yêu cầu “trang ngắn hơn” hay “không cần cuộn nhiều”, thực chất bạn đang đề xuất thêm cột, không phải cắt nội dung.
Câu hỏi thường gặp về grid layout
Grid layout trong Figma và trong CSS có khác nhau không?
Về khái niệm thì giống nhau, nhưng cách triển khai khác. Figma Grid Overlay là công cụ hỗ trợ thiết kế trực quan, chỉ hiện trong phần mềm thiết kế để căn chỉnh. CSS Grid là thuộc tính code thật, xác định bố cục hiển thị trong trình duyệt. Một bản thiết kế Figma dùng 12 cột thì khi developer dựng code cũng sẽ tái tạo 12 cột đó bằng CSS Grid.
Grid layout và bố cục tự do khác nhau thế nào?
Bố cục tự do đặt phần tử ở vị trí tuyệt đối, không theo hệ thống. Kết quả nhìn có vẻ “sáng tạo” ở bản thiết kế tĩnh, nhưng khi nội dung thay đổi độ dài hay khi thu nhỏ màn hình thì dễ vỡ bố cục. Grid đặt ra ràng buộc có chủ đích nên linh hoạt hơn khi nội dung thay đổi.
Số cột có cần đồng bộ giữa designer và developer không?
Bắt buộc. Nếu designer dùng 12 cột trong Figma mà developer triển khai 10 cột trong CSS, các phần tử sẽ lệch khỏi vị trí thiết kế gốc. Đây là một trong những nguyên nhân hay gặp khiến bản thiết kế và bản code trông khác nhau dù nội dung giống hệt.
Xem thêm về thiết kế web chuyên nghiệp ở đâu?
Grid layout là một phần trong quy trình thiết kế UI/UX, được thiết lập từ bước wireframe trước khi vào màu và hình ảnh. Xem chi tiết tại trang thiết kế UI/UX của Web22.