Bài 18: So sánh Flexbox và Grid – Nên dùng khi nào?

Sau khi học cả Flexbox và CSS Grid, nhiều người đặt câu hỏi:

“Tôi nên dùng cái nào để xây dựng bố cục trang web?”

Câu trả lời nằm ở cách bạn muốn dàn layout: theo chiều nào? có phức tạp không? có cần đặt phần tử theo ô cụ thể không?

Bài học này sẽ giúp bạn phân biệt rõ khi nào nên dùng Flexbox, khi nào nên dùng Grid, và khi nào có thể kết hợp cả hai.

---

1. Flexbox là gì?

Flexbox là mô hình bố cục một chiều – tức là bạn sắp xếp các phần tử theo hàng ngang hoặc cột dọc, nhưng không xử lý tốt cả hai chiều cùng lúc.

Đặc điểm:

• Đơn giản, dễ dùng
• Tuyệt vời cho menu ngang, căn giữa, danh sách item
• Mỗi dòng là một khối riêng

---

2. Grid là gì?

Grid là mô hình bố cục hai chiều – bạn thiết lập hệ lưới gồm hàng và cột, và đặt phần tử chính xác vào từng ô.

Đặc điểm:

• Mạnh mẽ hơn, rõ ràng hơn
• Tuyệt vời cho layout toàn trang, dashboard, lưới hình ảnh, blog
• Cho phép thiết kế bố cục phức tạp, gộp dòng/gộp cột dễ dàng

---

3. So sánh nhanh

Tính năng	Flexbox	CSS Grid
Chiều bố cục	Một chiều	Hai chiều
Mục đích chính	Dòng hoặc cột	Hệ thống lưới toàn diện
Đơn giản, dễ học	Rất dễ	Hơi phức tạp hơn
Căn chỉnh nội dung	Tuyệt vời	Có, nhưng không linh hoạt bằng
Đặt phần tử theo vị trí	Khó	Chính xác từng ô
Ứng dụng phổ biến	Navbar, list, form, nút	Trang chủ, tin tức, gallery

---

4. Khi nào nên dùng Flexbox?

• Menu điều hướng ngang hoặc dọc
• Căn giữa phần tử theo trục
• Chia cột đơn giản, không cần hàng – cột phức tạp
• Form layout ngắn gọn

📋 Copy.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

---

5. Khi nào nên dùng Grid?

• Trang chủ có nhiều section: banner, bài viết, sidebar
• Giao diện dạng bảng, có dòng – cột rõ ràng
• Lưới hình ảnh hoặc lưới tin
• Khi bạn cần sắp xếp phần tử vào đúng ô

📋 Copy.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto;
  gap: 20px;
}

---

6. Có thể kết hợp cả hai?

Hoàn toàn được!

Bạn có thể dùng display: grid cho layout tổng thể, rồi display: flex cho từng item bên trong.

Ví dụ:

📋 Copy.page {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.sidebar {
  background: #eee;
}

.content {
  display: flex;
  flex-direction: column;
}

→ Grid quản lý bố cục lớn, Flexbox xử lý nội dung nhỏ bên trong.

---

7. Lời khuyên cuối cùng

Nếu bạn…	Hãy dùng…
Cần căn chỉnh 1 hàng/1 cột đơn giản	Flexbox
Cần hệ thống dòng và cột	Grid
Cần đặt phần tử vào ô cụ thể	Grid
Cần sắp xếp linh hoạt theo chiều	Flexbox
Cần kết hợp layout chuyên sâu	Cả Grid và Flexbox

---

Tổng kết Phần 2

Bạn vừa hoàn thành 8 bài học về bố cục trang web với CSS hiện đại:

• Flexbox: nhanh gọn cho sắp xếp một chiều
• Grid: mạnh mẽ cho thiết kế lưới hai chiều
• Bạn có thể kết hợp cả hai để xây dựng những trang web chuyên nghiệp, đáp ứng mọi kích thước màn hình.