Grid system cơ bản — 12 cột, CSS Grid vs Flexbox và breakpoint mobile-first

Grid system là khung phân chia layout thành cột + gutter + margin để mọi element căn theo cùng trục — cơ sở cho consistency và responsive. Bài này hướng dẫn xây grid từ design Figma tới CSS implement, chọn CSS Grid vs Flexbox, set breakpoint mobile-first và 8 lỗi grid phổ biến.

Vì sao grid 12 cột vẫn là chuẩn de facto 2026

Grid system không phải chuyện trang trí — là alignment skeleton cho mọi element trên screen. Layout thiếu grid khiến text, image, card, button căn lệch 2-4px ngẫu nhiên, mắt user nhận ra ngay (não nhạy với pattern broken).

Web 2026 chuẩn hoá quanh grid 12 cột với gutter 16-32px tuỳ breakpoint, dùng song song CSS Grid (cho 2D layout — page hierarchy) và Flexbox (cho 1D — component nội bộ). Tailwind CSS 4 và Bootstrap 5 đều dùng convention 12 cột với 5 breakpoint sm/md/lg/xl/2xl.

Lý do 12 cột thay vì 10 hay 16

12 chia hết cho 2, 3, 4, 6 — đủ flexibility cho layout 2 cột, 3 cột, 4 cột mà vẫn căn trên cùng grid. 10 cột chia 2 và 5, không hỗ trợ layout 3 cột phổ biến.

16 cột chia 2, 4, 8 nhưng không cho 3 hay 6.

Một số project editorial dùng 16 cột để có column thinner cho gallery. Đa số business stick 12 cột vì cover 90% layout business.

Đây là di sản từ Bootstrap (2011) và đã thành industry default sau nhiều năm.

3 thành phần grid — column, gutter, margin

3 thành phần chính của grid: column (cột chứa content), gutter (khoảng cách giữa cột), margin (khoảng cách từ container tới mép viewport). Hiểu rõ 3 thành phần này giúp tính kích thước cột chính xác khi handoff cho dev.

Cách tính kích thước cột theo container

Một grid 12 cột với container max-width 1200px, gutter 24px, margin 24px → mỗi cột rộng (1200 – 24×11) / 12 = 78px. Dùng span để gộp 2 cột (180px), 3 cột (282px), 4 cột (384px), 6 cột (588px), 12 cột (1200px).

Tính toán này hữu dụng khi designer cần biết chính xác width của card 3 cột hay sidebar 4 cột để chuẩn bị asset (hero image, banner). Width sai dẫn tới ảnh upscale/downscale, giảm chất lượng visual.

Vì sao grid là alignment skeleton

Áp grid khiến mọi element trên cùng baseline, layout có rhythm visual rõ. Đây là 1 trong 7 nguyên tắc UI cốt lõi — xem nguyên tắc thiết kế UI, mục alignment và proximity.

Không có grid thì 5 designer cùng làm 1 site sẽ ra 5 layout lệch nhau. Có grid thì 5 designer cùng output căn theo 1 trục — dev implement 1 lần là chạy cho mọi screen.

12-column grid — Bootstrap 5 và Tailwind CSS 4

12-column grid là chuẩn de facto. Cách implement khác nhau giữa Bootstrap và Tailwind nhưng concept giống nhau — span N cột để định kích thước element, gutter cố định giữa cột, container max-width center.

Bootstrap 5 — class verbose, explicit

<div class="container">
  <div class="row">
    <div class="col-md-8">Content chính</div>
    <div class="col-md-4">Sidebar</div>
  </div>
</div>

Container có max-width 540/720/960/1140/1320 theo breakpoint. Row dùng flex layout, gutter 24px (var –bs-gutter-x).

Col-md-8 = 8/12 = 66,6% width từ md breakpoint trở lên.

Class verbose nhưng explicit — dev đọc HTML hiểu ngay layout. Bootstrap còn dùng phổ biến 2026 cho project legacy hoặc team chưa quen utility class.

Migration sang Tailwind cần effort 2-4 tuần cho team 3-5 dev.

Tailwind CSS 4 — utility-first, tree-shake

<div class="container mx-auto px-4 md:px-6 lg:px-8">
  <div class="grid grid-cols-12 gap-6">
    <div class="col-span-12 md:col-span-8">Content chính</div>
    <div class="col-span-12 md:col-span-4">Sidebar</div>
  </div>
</div>

Tailwind dùng CSS Grid native. grid-cols-12 tạo 12 track equal width, gap-6 gutter 24px. col-span-N để element span N cột. Mobile-first: col-span-12 default (full width), từ md trở lên span 8/4.

Verbose ở class nhưng output CSS gọn (tree-shake bỏ class không dùng). Bundle CSS production thường 5-20KB cho website business — nhỏ hơn Bootstrap (~150KB chưa minify) 5-10 lần.

CSS Grid vs Flexbox — khi nào dùng cái nào

Đây là câu hỏi mỗi dev junior đặt ra. Câu trả lời: dùng cả hai, mỗi cái cho mục đích riêng.

Quy tắc thực hành dưới đây giúp chọn nhanh trong 90% case.

Grid cho 2D, Flex cho 1D

• CSS Grid cho 2D layout: page-level, section grid, dashboard layout với header + sidebar + main + footer. Khi cần kiểm soát cả row và column cùng lúc.
• Vd gallery 4 cột × N row tự fit, dashboard SaaS với named area.
• Flexbox cho 1D layout: component-level, navigation horizontal, button group, card content vertical. Khi cần align + distribute element theo 1 trục duy nhất.
• Quy tắc nhớ: “Grid cho lớn, Flex cho nhỏ”. Page layout (lớn) — Grid.
• Component nội bộ (nhỏ) — Flex. Trong 1 grid cell có thể chứa flex container — kết hợp tự nhiên.

Ví dụ concrete — page layout và card

/* Page layout: CSS Grid */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
}

/* Card component: Flexbox */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Khi nào tránh Grid: layout đơn giản 1 chiều (Flex đơn giản hơn). Khi nào tránh Flex: cần align cross-row trong layout 2 chiều (Flex chỉ 1 chiều).

2 spec đã ổn định và full support browser modern.

Responsive grid — breakpoint mobile-first

Mobile-first là approach mặc định 2026. Viết CSS cho mobile trước (smallest screen), dùng media query min-width override cho larger screen.

60-70% traffic Việt Nam từ mobile theo StatCounter, code mobile-first đơn giản hơn + nhỏ hơn.

5 breakpoint chuẩn Tailwind + Bootstrap

• sm — 640px: mobile lớn (phone landscape, mini tablet). Default cho element thay đổi nhỏ.
• md — 768px: tablet portrait (iPad mini, iPad). Switch từ stack sang 2-cột thường ở đây.
• lg — 1024px: tablet landscape, laptop nhỏ. Bắt đầu sidebar layout, navigation horizontal full.
• xl — 1280px: desktop standard. Container max 1200px hiển thị đầy đủ.
• 2xl — 1536px: desktop lớn, 4K monitor. Tăng container max lên 1400-1500px hoặc giữ 1200px (đa số chọn giữ).

Pattern grid theo breakpoint

• Mobile (dưới 768px): 4-column grid với gutter 16px. Đa số content stack 1 cột (col-span-4 = full width).
• Card 2-up dùng col-span-2.
• Tablet (768-1023px): 8-column grid với gutter 20px. Sidebar bắt đầu xuất hiện (col-span-2 sidebar, col-span-6 main).
• Desktop (trên 1024px): 12-column grid với gutter 24px. Layout 2 cột (8/4), 3 cột (4/4/4), 4 cột (3/3/3/3) đều có thể.

Implement mobile-first với Tailwind

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

Mobile 1 cột → tablet 2 cột → desktop 3 cột. Gap mobile 16px, từ md trở lên 24px.

1 dòng class cover responsive đầy đủ — đây là sức mạnh utility-first của Tailwind so với viết @media query thủ công.

Gutter, margin và container max-width

Gutter và margin xác định khoảng trắng giữa cột và mép viewport. Thường bị bỏ qua nhưng ảnh hưởng lớn perceived quality — gutter quá nhỏ làm card list cảm giác “dày đặc”, gutter quá lớn làm card rời rạc.

Gutter và margin scale theo breakpoint

• Gutter (khoảng giữa cột): 16-32px tuỳ breakpoint. Mobile 16px (màn nhỏ, tiết kiệm space).
• Tablet 20px. Desktop 24px.
• 4K monitor 32-40px cần thoáng hơn. Tailwind gap utility gap-4/gap-5/gap-6/gap-8.
• Margin container (cách mép viewport): 16px mobile, 24px tablet, 32-48px desktop. Implement qua container padding-inline: px-4 md:px-6 lg:px-8 trong Tailwind.
• Container max-width: 1200-1440px tuỳ brand. 1200px cho website business chuẩn (nhiều text).
• 1280px cho dashboard SaaS. 1440px cho landing page hero photography.

Baseline grid 4px hoặc 8px

Baseline grid là quy ước mọi element có height + padding + margin chia hết cho 4 hoặc 8. Baseline 4px linh hoạt hơn (cho phép step nhỏ), 8px nghiêm ngặt hơn (consistency cao hơn).

Tailwind dùng scale 4px (p-1 = 4px, p-2 = 8px, p-3 = 12px…). Áp baseline khiến “mọi thứ ăn khớp”, layout có rhythm.

Chi tiết về spacing scale 8pt xem bài white space trong thiết kế.

Modular grid và hierarchical grid

Ngoài 12-column standard, có 2 grid pattern cao cấp dùng cho layout đặc biệt. Đa số website business 80% case dùng 12-column thuần là đủ — 2 pattern dưới chỉ cần khi 12-column thiếu flexibility.

Modular grid — gallery và dashboard widget

Modular grid chia container thành module vuông + chữ nhật đều nhau, content fit vào module. Dùng cho gallery, product grid, dashboard widget.

Khác 12-column ở chỗ row + column cùng kích thước — element span 1×1, 2×2, 3×1 module.

.modular-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
  gap: 1rem;
}
.gallery-item.large {
  grid-column: span 2;
  grid-row: span 2;
}

Hierarchical grid — magazine layout

Hierarchical grid không equal column, mỗi area có size khác nhau theo importance. Vd magazine layout hero 60% width + 2 secondary 40% width chia 2.

Implement qua grid-template-columns: 3fr 2fr hoặc named area. Pattern này phù hợp editorial, portfolio designer, brand storytelling.

Hiếm dùng cho dashboard hoặc shop e-commerce.

Subgrid — nested grid kế thừa parent column

Subgrid (Chrome 117+, Firefox 71+, Safari 16+) cho phép nested grid kế thừa column track của parent grid. Trước subgrid, nested grid phải tự định nghĩa cột riêng — kết quả là card con không thẳng hàng với card khác cùng level.

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

Pattern phổ biến: card list với title + description + footer cần align baseline cross-card. Trước subgrid phải dùng JS đo height.

Subgrid solve thuần CSS, performance tốt hơn 5-10 lần.

8 lỗi grid phổ biến và cách fix

Sau audit 50+ project Web22 đã review, 8 lỗi grid dưới đây xuất hiện thường nhất theo thứ tự ưu tiên fix. Lỗi 1-4 ảnh hưởng readability + responsive, lỗi 5-8 ảnh hưởng consistency và maintenance.

Lỗi 1-4 — Container, gutter, baseline, stack

• Lỗi 1 — Không có max-width container: content fill 100% width trên 4K monitor, dòng dài 200 ký tự. Fix container max 1200px, căn giữa margin-inline: auto.
• Lỗi 2 — Gutter không scale theo breakpoint: mobile gutter 24px (quá rộng cho màn nhỏ), desktop gutter 24px (vừa). Fix gutter responsive — gap-4 md:gap-6 lg:gap-8.
• Lỗi 3 — Element căn lệch baseline 2-4px: button có padding 13px thay vì 12 hoặc 16. Fix enforce spacing scale 4px qua design token.
• Lỗi 4 — Không stack đúng trên mobile: desktop 3 cột không xuống 1 cột mobile, layout vỡ. Fix mobile-first grid-cols-1 md:grid-cols-3.

Lỗi 5-8 — Sidebar mobile, padding, nested, float

• Lỗi 5 — Sidebar fixed width 250px trên mobile: sidebar che 80% màn hình mobile. Fix sidebar collapse thành drawer trên mobile, chỉ hiển thị desktop.
• Lỗi 6 — Padding container = 0 trên mobile: content sát mép viewport, khó đọc + accessibility kém. Fix tối thiểu 16px padding-inline trên mobile.
• Lỗi 7 — Nested grid không gap: grid trong grid không có gap → element dính sát. Fix mỗi grid level có gap riêng phù hợp level.
• Lỗi 8 — Dùng float thay grid (legacy): code cũ pre-2017 dùng float clearfix. Fix rewrite sang CSS Grid hoặc Flexbox — float đã obsolete cho layout từ 2017.

Câu hỏi thường gặp về grid system

Tài nguyên và bước tiếp theo

Grid system là cơ sở cho alignment và consistency. Sau khi nắm grid, cần phối hợp với typography + color + spacing để hoàn thiện design system.

Các bài liên quan trong cụm UI/UX cơ bản:

• UI/UX là gì — định nghĩa, 5 layer UX và 6 thành phần UI cốt lõi — grid là 1 trong 6 thành phần UI cốt lõi, đặt trong context tổng thể.
• 7 nguyên tắc thiết kế UI — checklist mỗi screen cần verify — grid là foundation cho alignment, 1 trong 7 nguyên tắc.
• White space trong thiết kế — spacing scale 8pt và token chuẩn — gutter và margin là white space trong grid.
• Typography cho web 2026 — modular scale và variable font — measure (ký tự / dòng) liên quan trực tiếp container max-width.
• Tư vấn brand identity + design system trọn gói — gói trọn gói gồm 12-col grid template + breakpoint + container token.

Cần đội Web22 setup grid system + responsive layout chuẩn cho website 8-15 page với Figma + Tailwind config + dev guideline? Tư vấn brand identity + design system trọn gói — bàn giao trọn gói gồm grid template + breakpoint + container token + component library.