Với một thanh toolbar (logo trái, menu giữa, nút phải) và một lưới card sản phẩm, bạn chọn Flexbox hay Grid cho từng cái? Vì sao?

Toolbar → Flexbox. Lưới card → Grid.

Tiêu chí chọn: Flexbox là layout một chiều — bố trí một hàng (hoặc một cột) và phân phối không gian dư theo nội dung. Grid là layout hai chiều — định nghĩa hàng và cột trước, rồi xếp item vào ô.

.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
}
.toolbar .menu { flex: 1; } /* đẩy nút sang phải */

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

Toolbar cần các phần tử tự co giãn theo nội dung và căn theo trục ngang → Flexbox tự nhiên hơn. Lưới card cần các cột thẳng hàng cả ngang lẫn dọc và số cột đổi theo bề rộng → Grid làm được bằng một dòng khai báo, còn Flexbox phải tính width theo phần trăm và trừ gap thủ công.

Hai cái không loại trừ nhau: thường Grid cho khung trang, Flexbox cho nội dung bên trong từng ô.