CSS Grid vs Flexbox: Khi nào dùng cái nào?

Câu hỏi "Grid hay Flexbox?" xuất hiện trong hầu hết mọi dự án frontend. Câu trả lời ngắn là: không phải cái nào tốt hơn — chúng giải quyết các vấn đề khác nhau. Hiểu sự khác biệt này là nền tảng để viết CSS tốt.

Sự Khác Biệt Cốt Lõi

Đây là cách đơn giản nhất để nhớ:

Flexbox: Layout 1 chiều — một hàng hoặc một cột
Grid: Layout 2 chiều — hàng VÀ cột đồng thời

Flexbox layout từ content ra ngoài. Grid layout từ container vào trong.

Flexbox — Khi Nào Dùng

/* Navigation bar */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Card footer với button căn phải */
.card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Centering — use case kinh điển */
.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

Flexbox phù hợp cho:

Navigation bars
Button groups
Card headers/footers
Centering elements
Danh sách items theo một chiều

Grid — Khi Nào Dùng

/* Page layout */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Card grid responsive */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Magazine layout */
.magazine {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.featured-article {
  grid-column: span 8;
}
.sidebar {
  grid-column: span 4;
}

Grid phù hợp cho:

Page layout tổng thể
Card galleries
Dashboard layouts
Complex 2D layouts

Kết Hợp Cả Hai

Thực tế, bạn sẽ dùng cả hai cùng nhau. Grid cho structure tổng thể, Flexbox cho component bên trong:

/* Grid cho layout trang */
.blog-page {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
}

/* Flexbox cho từng card bên trong */
.post-card {
  display: flex;
  flex-direction: column;
}
.post-card-body {
  flex: 1; /* Đẩy footer xuống dưới */
}
.post-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

auto-fill vs auto-fit

Một trong những tính năng mạnh nhất của Grid là responsive layout không cần media queries:

/* auto-fill: giữ tracks dù content ít */
.gallery {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* auto-fit: collapse empty tracks */
.gallery {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Gap Thay Margin

/* Trước đây — dùng margin, phức tạp */
.item { margin-right: 1rem; }
.item:last-child { margin-right: 0; }

/* Bây giờ — gap đơn giản hơn nhiều */
.container {
  display: flex; /* hoặc grid */
  gap: 1rem; /* Áp dụng cho cả hai chiều */
  /* column-gap: 1rem; row-gap: 0.5rem; */
}

Dùng Grid khi bạn đang nghĩ về layout. Dùng Flexbox khi bạn đang nghĩ về alignment. Khi nghi ngờ, thử Grid trước.

Kết Luận

Grid và Flexbox là hai công cụ tốt nhất mà CSS từng có. Không cần phải chọn một trong hai — hãy học cả hai và dùng đúng công cụ cho đúng việc. Bước tiếp theo: tìm hiểu CSS Container Queries để layout responsive thông minh hơn nữa.

CSS Grid vs Flexbox — Chọn Đúng Công Cụ Cho Layout