CSS Grid là gì?
Còn gọi: bố cục lưới hai chiều, grid css, display grid, css grid layout, grid-template-columns
CSS Grid là mô hình bố cục trong CSS cho phép chia trang hoặc một khối thành lưới hàng và cột cùng lúc, rồi đặt phần tử vào các ô, kể cả trải qua nhiều ô.
Hiểu kỹ hơn
Khác với flexbox chỉ xử lý một chiều, Grid kiểm soát cả hàng lẫn cột, nên hợp với bố cục trang, thư viện ảnh, bento grid hay dashboard. Ví dụ grid-template-columns: repeat(12, 1fr) tạo lưới 12 cột bằng nhau, trong đó fr là đơn vị chia phần không gian còn lại; gap đặt khoảng cách giữa các ô, tương ứng gutter trong thiết kế. Một mẫu rất hữu ích là repeat(auto-fill, minmax(240px, 1fr)): số cột tự tăng giảm theo bề rộng màn hình mà không cần nhiều breakpoint. Designer làm việc với layout grid trong Figma sẽ thấy khái niệm cột, gutter, margin gần như trùng khớp với CSS Grid. Khi bàn giao, ghi rõ số cột, gutter và cách phần tử trải qua bao nhiêu cột ở mỗi breakpoint.
