Flexbox vs Grid. Khi nào dùng cái nào? Tại sao?

Flexbox là hệ thống layout một chiều, phân bố item dọc theo một trục (hàng hoặc cột), phù hợp cho navigation bar, danh sách item, hoặc căn chỉnh đơn giản.

• CSS Grid là hệ thống layout hai chiều, cho phép định nghĩa cả hàng và cột cùng lúc, phù hợp cho layout trang, dashboard, hoặc bố cục phức tạp.
• Trong thực tế thường kết hợp cả hai: Grid cho bố cục tổng thể của trang, Flexbox cho layout bên trong từng component.
• Quy tắc đơn giản: nếu chỉ cần sắp xếp theo một hướng thì dùng Flexbox, nếu cần kiểm soát cả hai chiều thì dùng Grid.