Flex vs Grid chọn nhanh | Cheat sheet layout CSS 30 giây【2026】

Bạn đang mở file CSS, cursor nhấp nháy trên display: … — không cần đọc lại bài so sánh 3000 chữ. Cần quyết định trong nửa phút. Bài này là cheat sheet chọn Flex vs Grid: litmus 3 câu, bảng tình huống, snippet tối thiểu, và 5 lỗi DevTools hay gặp. Nếu muốn phân tích sâu theo màn hình nav/dashboard, đọc thêm Grid vs Flexbox theo use-case.

Ai giữ bookmark bài này

• Sinh viên / fresher cần câu trả lời một dòng trước khi hỏi mentor
• Freelancer Việt Nam review layout trên điện thoại khách (4G, Chrome Android)
• Dev outsourcing nhận Figma rồi phải chọn flex hay grid trong 5 phút standup

Litmus 30 giây (in ra dán cạnh màn hình)

1. Có đang căn theo cả hàng lẫn cột không?
   Có → Grid. Chỉ một hàng hoặc một cột → Flex.
2. Một item cao hơn có làm lệch cả “hệ lưới” không?
   Có (card gallery, form label thẳng cột) → Grid. Không (chip wrap, nhóm nút) → Flex.
3. Bạn có đặt tên vùng trên giấy không? (header / aside / main)
   Có → nghiêng grid-template-areas. Không → thử Flex trước.

Snippet tối thiểu (copy rồi sửa)

A — Nav Flex (mặc định đúng 90% trường hợp)

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

Đổi flex-direction: column trên mobile — align-items / justify-content đổi vai trò theo main axis. Đây là chỗ fresher hay “bị lệch giữa” mà không hiểu vì sao.

B — Gallery Grid

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

Một dòng minmax thay cả media query 3 breakpoint cho nhiều landing. Muốn chỉnh số cột / fr / gap trực quan trước khi dán vào repo:

Hoặc mở đầy đủ công cụ CSS Grid: chọn số hàng, cột, track (1fr / auto / minmax), gap → copy CSS. Không upload stylesheet lên server lạ — phù hợp code client NDA.

C — Shell trang + Flex ruột

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "side head"
    "side main"
    "side foot";
  min-height: 100dvh;
}
.side { grid-area: side; }
.head {
  grid-area: head;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Grid đặt vùng, Flex căn nội dung — đây là pattern bảo trì tốt hơn “toàn trang một display: flex rồi wrapper 6 lớp”.

Bảng thuộc tính “hay nhầm”

5 lỗi hay gặp (và cách đọc DevTools)

1. width: 100% trên flex child → overflow ngang. Thử min-width: 0 trên item co được.
2. Grid item không co vì nội dung dài (URL, bảng). Cùng mẹo: minmax(0, 1fr) thay vì 1fr thuần.
3. margin: auto trên Grid đẩy item theo cách khác Flex — kiểm tra overlay Grid trước khi “fix bằng magic number”.
4. Dùng Flex cho gallery rồi align-items: stretch kỳ vọng cột thẳng — chiều cao hàng Flex không tạo track chung như Grid.
5. Quên gap, dùng margin âm — khó responsive; hiện đại dùng gap trên cả Flex và Grid.

Checklist 60 giây trước khi merge:

• Overlay Flex/Grid đã bật, axis đúng hướng?
• Mobile: wrap / areas đổi chưa vỡ?
• Có min-width: 0 / minmax(0, 1fr) nơi text dài?
• Không còn float để layout chính?

Case nhanh: landing freelance vs admin outsourcing

Landing portfolio (1 người): hero + hàng CTA + lưới project. CTA hàng → Flex. Lưới project → Grid auto-fit. Toàn bộ xong trong một buổi — không cần 12-column framework.

Admin báo cáo (team outsource): sidebar cố định + main widget. Shell → Grid areas. Mỗi widget header (title + filter + export) → Flex. Reviewer chỉ cần nhìn areas để biết vùng nào đổi breakpoint.

Khi nào mở tool thay vì gõ tay

• Quên cú pháp repeat() / minmax() / thứ tự grid-template
• Muốn thử 3–4 phương án cột trước khi commit
• Hướng dẫn intern: chỉnh form trên CSS Grid rồi copy — nhanh hơn giải thích abstract trên whiteboard

Tool không thay tư duy litmus ở trên. Nó chỉ rút ngắn bước viết grid-template-*.

Liên kết liên quan

• CSS Grid generator
• Grid vs Flexbox theo use-case (nav & dashboard)
• grid-template-areas
• Danh sách công cụ