Mở đầu — vì sao bài này quan trọng
Bạn đã bao giờ mở một website và cảm thấy "có gì đó sai sai" dù không chỉ ra được chính xác không? Chữ chỗ thì lệch trái, ảnh chỗ thì thò ra một chút, các khối nội dung trông như được rải ngẫu nhiên. Ngược lại, khi vào trang chủ của Tiki, Shopee hay The New York Times, mọi thứ ngay ngắn đến lạ thường — dù trên màn hình có cả chục thành phần khác nhau. Bí mật đằng sau cảm giác "gọn gàng" đó không phải năng khiếu trời cho, mà là grid system — hệ thống lưới.
Grid là bộ khung vô hình nằm dưới mọi giao diện chuyên nghiệp. Nó là thứ ngăn cách giữa một thiết kế nghiệp dư (mỗi phần tử một kiểu căn lề) và một thiết kế đáng tin cậy (mọi thứ tuân theo cùng một logic). Quan trọng hơn với nghề nghiệp của bạn: grid là ngôn ngữ chung giữa designer và developer. Khi bạn nói "cái card này rộng 4 cột", một lập trình viên hiểu ngay phải code thế nào, không cần đoán mò "khoảng 320px hay 340px".
Trong bài này, chúng ta đi sâu vào cấu trúc của grid — đặc biệt là hệ 12 cột đang thống trị web hiện nay — và cả những hệ khác mà bạn nên biết để không bị đóng khung tư duy. Đây là kiến thức nền tảng; nắm vững nó, các bài về Flexbox, CSS Grid, hay layout responsive sau này sẽ nhẹ nhàng hơn rất nhiều.
Khái niệm cốt lõi
Grid được tạo từ những thành phần nào?
Một grid system không chỉ là "mấy cái cột". Nó gồm các bộ phận sau, và bạn cần gọi đúng tên để giao tiếp chuyên nghiệp:
- Columns (cột): Các dải dọc chứa nội dung. Đây là phần nội dung thực sự "ngồi" lên.
- Gutters (rãnh): Khoảng trống giữa hai cột liền kề. Gutter giữ cho nội dung không dính sát vào nhau. Phổ biến là 16px, 20px hoặc 24px.
- Margins (lề ngoài): Khoảng trống hai bên rìa của grid, ngăn nội dung dán sát mép màn hình.
- Container (vùng chứa): Chiều rộng tổng mà toàn bộ grid nằm trong đó. Trên desktop thường giới hạn khoảng 1140px–1280px để dòng chữ không quá dài.
Tại sao lại là con số 12?
Đây là câu hỏi mấu chốt. Số 12 được chọn không phải ngẫu nhiên mà vì nó chia hết cho nhiều số nhất trong tầm hợp lý. 12 chia hết cho 1, 2, 3, 4, 6 và 12. Điều này cho bạn sự linh hoạt khủng khiếp khi bố cục:
- Chia đôi: 6 + 6 (hai cột bằng nhau, ví dụ ảnh bên trái, chữ bên phải)
- Chia ba: 4 + 4 + 4 (ba card sản phẩm cùng hàng)
- Chia tư: 3 + 3 + 3 + 3 (bốn ô thống kê)
- Chia lệch: 8 + 4 (nội dung chính + sidebar), hoặc 9 + 3
- Toàn bộ: 12 (một banner hero chiếm trọn chiều rộng)
Grid không cứng nhắc: các biến thể "beyond 12"
12 cột là tiêu chuẩn, nhưng đừng nghĩ nó là luật bất di bất dịch. Tùy ngữ cảnh, designer chọn hệ khác:
- Grid 4 cột cho mobile: Trên điện thoại, màn hình hẹp nên 12 cột là thừa thãi. Material Design khuyến nghị 4 cột cho mobile, 8 cột cho tablet, 12 cột cho desktop.
- Grid 16 hoặc 24 cột: Dùng cho dashboard phức tạp, trang báo nhiều khối tin — nơi cần chia nhỏ hơn để xếp được nhiều thành phần.
- Modular grid (lưới module): Không chỉ cột dọc mà còn chia hàng ngang, tạo thành các "ô" (như bàn cờ). Rất hợp cho gallery ảnh, trang tạp chí.
- Asymmetric grid (lưới bất đối xứng): Các cột không đều nhau, tạo cảm giác phá cách, hiện đại — thường thấy ở portfolio designer hoặc trang thương hiệu thời trang.
Hard grid vs soft grid
Một khái niệm hay bị bỏ qua: grid của bạn nên cố định (fixed/hard) hay co giãn (fluid/soft)? Grid cố định giữ nguyên độ rộng cột bằng px dù màn hình to nhỏ thế nào — phần thừa dồn ra margin. Grid co giãn dùng phần trăm (%), cột phình to thu nhỏ theo màn hình. Web hiện đại thường dùng kiểu lai: container có giới hạn max-width (cố định trần trên), nhưng bên trong cột co giãn theo phần trăm.
Tình huống thực tế
Ví dụ 1: Tiki và bài toán trang danh mục sản phẩm
Hãy nhìn trang danh mục của Tiki — một sàn thương mại điện tử lớn của Việt Nam. Trên desktop, bạn thấy lưới sản phẩm 5 cột, bên trái là sidebar bộ lọc. Nếu áp lên hệ 12 cột: sidebar chiếm 2 cột, vùng sản phẩm chiếm 10 cột, và trong 10 cột đó các card sản phẩm tự xếp.
Vấn đề thú vị: 10 không chia đều cho 5 trong hệ grid chuẩn. Đây là lúc đội thiết kế phải ra quyết định — họ tách vùng sản phẩm thành một grid con (nested grid) riêng, chia 5 phần đều nhau bên trong vùng 10 cột đó, thay vì ép vào 12 cột tổng. Khi xuống tablet, lưới rút còn 3 cột; xuống mobile còn 2 cột.
Bài học rút ra: Grid không phải một lưới duy nhất phủ toàn trang. Bạn có thể lồng grid trong grid. Sidebar dùng grid tổng, vùng sản phẩm dùng grid riêng tối ưu cho số lượng card. Đừng cố nhồi mọi thứ vào đúng 12 đường kẻ — hãy dùng grid như công cụ, không phải xiềng xích.
Ví dụ 2: Một startup fintech ở TP.HCM và sự cố "thiết kế đẹp nhưng code mãi không xong"
Mình từng tư vấn cho một startup ví điện tử nhỏ ở Quận 1. Designer của họ rất giỏi mỹ thuật nhưng làm việc trong Figma mà không bật grid layout. Mỗi màn hình anh căn lề bằng mắt: card này cách lề 22px, card kia 19px, tiêu đề thụt vào 28px. Trông trên Figma thì đẹp.
Đến khi bàn giao cho 2 developer, thảm họa xảy ra: lập trình viên hỏi "card này rộng bao nhiêu, lề bao nhiêu?" và nhận về câu trả lời "ờ, làm sao cho giống Figma là được". Kết quả là họ mất gần một sprint (2 tuần) chỉ để đo đạc thủ công và cãi nhau xem con số đúng là bao nhiêu. Sản phẩm cuối lệch tông giữa các màn hình vì mỗi dev đo một kiểu.
Sau đó mình hướng dẫn họ thiết lập một grid 12 cột chuẩn: container 1140px, gutter 24px, margin 32px. Mọi phần tử buộc phải bám cột. Đột nhiên developer chỉ cần biết "card rộng 4 cột" là code ra ngay. Tốc độ bàn giao của sprint sau nhanh gấp đôi, và quan trọng hơn — không còn tranh cãi về con số.
Bài học rút ra: Grid không phải để làm đẹp cho designer, mà là hợp đồng giữa thiết kế và lập trình. Bỏ qua grid, bạn đẩy chi phí "đoán mò" sang đội dev và làm chậm cả dự án.
Ví dụ 3: Trang báo VnExpress và grid bất đối xứng
Mở VnExpress hay một trang báo lớn bất kỳ, bạn sẽ thấy bố cục không hề chia đều: một tin chính chiếm khối lớn bên trái (8 cột), một cụm tin phụ xếp dọc bên phải (4 cột), bên dưới là dải tin 3 cột rồi 4 cột xen kẽ. Đây là asymmetric grid điển hình — vẫn dựa trên 12 cột nhưng phân bổ lệch để tạo phân cấp thị giác: mắt người đọc bị hút vào khối tin lớn trước.
Điều tinh tế là dù bố cục trông phức tạp và "tự do", tất cả vẫn nằm trên 12 đường kẻ. Không khối nào thò ra ngoài lưới. Chính sự kỷ luật ngầm này giúp một trang dày đặc thông tin vẫn không gây rối mắt.
Bài học rút ra: Bất đối xứng không có nghĩa là vô tổ chức. Grid cho phép bạn phá cách một cách có kiểm soát — bạn được tự do trong khuôn khổ, và chính cái khuôn khổ đó tạo ra sự sang trọng.
Hướng dẫn từng bước
Hãy cùng thiết lập một grid 12 cột từ con số 0. Đây là quy trình bạn có thể áp dụng cho mọi dự án:
Bước 1 — Xác định container. Quyết định chiều rộng tối đa của vùng nội dung. Với web desktop năm 2026, con số an toàn là 1140px hoặc 1200px. Lý do: rộng hơn 1280px thì dòng chữ dài quá, mắt mỏi.
Bước 2 — Chọn margin hai bên. Trừ ra khoảng lề rìa. Ví dụ container 1200px, mỗi bên 24px margin, vùng grid thực còn 1152px.
Bước 3 — Chọn gutter. Quyết định khoảng cách giữa các cột. 24px là lựa chọn cân đối. Với 12 cột sẽ có 11 gutter ở giữa.
Bước 4 — Tính độ rộng một cột. Lấy (1152 − 11×24) ÷ 12 = (1152 − 264) ÷ 12 = 74px mỗi cột. Nhưng thực tế bạn hiếm khi tính tay — chỉ cần hiểu logic này để biết con số đến từ đâu.
Bước 5 — Đặt grid trong công cụ. Trong Figma, vào panel Layout Grid, chọn Columns, nhập 12, gutter 24, margin 24, type là Stretch. Bật phím tắt để hiện/ẩn grid (Ctrl/Cmd + Shift + 4 trên Figma) mà kiểm tra liên tục.
Bước 6 — Đặt nội dung bám cột. Mỗi phần tử phải bắt đầu và kết thúc đúng trên một đường cột. Một card 4 cột, sidebar 3 cột, hero 12 cột. Tuyệt đối không để cạnh phần tử rơi vào giữa cột.
Bước 7 — Định nghĩa grid cho từng breakpoint. Lặp lại quy trình cho mobile (thường 4 cột, margin 16px) và tablet (8 cột). Cùng một phần tử có thể là 4 cột trên desktop nhưng 12 cột (full width) trên mobile.
Lỗi thường gặp & mẹo
Lỗi 1 — Để phần tử "trôi" giữa hai cột. Đây là lỗi phổ biến nhất. Cạnh của card rơi vào giữa cột thứ 5 chẳng hạn. Kết quả là khi sang grid khác (responsive), mọi thứ vỡ tung. Mẹo: Luôn bật snap-to-grid và kiểm tra từng cạnh phải nằm đúng trên đường kẻ.
Lỗi 2 — Nhầm gutter với padding. Gutter là khoảng giữa các cột của grid, còn padding là khoảng đệm bên trong một phần tử. Nhiều bạn mới gộp hai khái niệm, dẫn đến khoảng cách lộn xộn. Mẹo: Vẽ ra giấy phân biệt rõ: gutter thuộc về grid, padding thuộc về component.
Lỗi 3 — Quên đặt content vào trong cột, để nó dán sát mép cột. Văn bản dán sát cạnh trái của cột trông rất bí. Mẹo: Nội dung nên có padding riêng bên trong cột, hoặc tận dụng gutter làm khoảng thở.
Lỗi 4 — Áp grid desktop cho mobile. 12 cột nhồi vào màn hình 375px khiến mỗi cột chỉ vài pixel, vô dụng. Mẹo: Mỗi breakpoint một grid riêng. Mobile dùng 4 cột là đủ.
Lỗi 5 — Tôn thờ grid đến mức cứng nhắc. Đôi khi một ảnh full-bleed (tràn viền, vượt cả margin) lại tạo điểm nhấn đẹp. Mẹo: Grid là kim chỉ nam, không phải nhà tù. Phá luật có chủ đích thì được, nhưng phải biết mình đang phá cái gì.
Mẹo vàng: Hãy đặt tên kích thước theo số cột khi giao tiếp với dev, ví dụ "col-4", "col-8". Đây chính là cú pháp Bootstrap và Tailwind dùng, nên dev sẽ hiểu ngay lập tức và việc bàn giao trở nên cực mượt.
Bài tập thực hành
- Bóc tách grid của một trang thật. Mở trang chủ Tiki hoặc Shopee trên desktop. Dùng giấy hoặc ảnh chụp màn hình, kẻ thử các đường cột và đoán xem họ dùng bao nhiêu cột. Card sản phẩm rộng mấy cột? Sidebar mấy cột? Ghi lại nhận định.
- Tự dựng grid trong Figma. Tạo một frame desktop 1440px, thiết lập grid 12 cột, gutter 24px, margin 32px. Sau đó đặt vào đó: một hero full-width (12 cột), một hàng 3 card (mỗi card 4 cột), và một khối nội dung + sidebar (8 cột + 4 cột).
- Thử nghiệm responsive. Lấy chính bố cục trên, tạo thêm phiên bản mobile 375px với grid 4 cột. Quyết định: 3 card kia sẽ xếp dọc thế nào? Sidebar đi đâu? Viết ra logic chuyển đổi của từng phần tử.
- Thử grid bất đối xứng. Thiết kế một trang portfolio dùng grid 12 cột nhưng bố cục lệch — ví dụ ảnh lớn 7 cột bên trái, mô tả 5 cột bên phải, đan xen. Mục tiêu: tạo cảm giác hiện đại mà vẫn giữ nội dung bám cột.
Tóm tắt
Grid system là bộ khung vô hình tạo nên sự ngăn nắp và đáng tin cậy cho mọi giao diện chuyên nghiệp. Nó gồm columns, gutters, margins và container — bạn cần gọi đúng tên để giao tiếp với đồng nghiệp. Hệ 12 cột thống trị web vì 12 chia hết cho nhiều số (2, 3, 4, 6), cho phép vô số kiểu bố cục linh hoạt: 6+6, 4+4+4, 8+4 và hơn thế. Nhưng 12 không phải luật tuyệt đối — mobile dùng 4 cột, dashboard có thể dùng 16-24 cột, và grid bất đối xứng cho phép phá cách có kiểm soát.
Quan trọng nhất, grid không chỉ là công cụ làm đẹp của designer mà là hợp đồng giữa thiết kế và lập trình — nó biến những con số mơ hồ thành ngôn ngữ chung "col-4, col-8" mà dev hiểu ngay. Như câu chuyện startup fintech ở Quận 1 cho thấy, bỏ qua grid là đẩy chi phí đoán mò sang cả đội và làm chậm dự án. Hãy luyện tập đến khi việc nghĩ theo cột trở thành phản xạ — đó là dấu hiệu bạn đã bước qua ranh giới từ nghiệp dư sang chuyên nghiệp.