CSS Grid là gì và vì sao quan trọng?
CSS Grid Layout là hệ thống bố cục hai chiều, cho phép kiểm soát đồng thời hàng và cột trong CSS. Trước khi Grid ra đời, lập trình viên phải dùng table, float, position hoặc inline-block để tạo layout — tất cả đều thiếu các chức năng quan trọng như căn giữa theo chiều dọc hay bố cục phức tạp mà không cần hack.
So với Flexbox, điểm khác biệt cơ bản là: Flexbox sắp xếp nội dung theo một hướng (hàng hoặc cột), còn CSS Grid kiểm soát cả hai hướng cùng lúc. Quy tắc đơn giản: dùng Flexbox cho nội dung bên trong một thành phần (thanh điều hướng, hàng button, căn giữa), dùng Grid cho cấu trúc tổng thể (toàn trang, lưới card, dashboard). Hai công cụ này không loại trừ nhau mà kết hợp rất tốt: Grid dàn khung trang, Flexbox sắp xếp nội dung trong từng ô.
Khái niệm cốt lõi của CSS Grid
Grid container và Grid items
Để bắt đầu sử dụng CSS Grid, bạn khai báo display: grid trên phần tử chứa. Toàn bộ phần tử con trực tiếp trở thành grid items. Đây là điểm khởi đầu cho mọi bố cục Grid.
Grid template columns và rows
Hai thuộc tính grid-template-columns và grid-template-rows định nghĩa số lượng và kích thước các track (cột và hàng). Ví dụ, grid-template-columns: 200px 200px 200px; sẽ tạo 3 cột rộng 200px mỗi cột. Hàm repeat() giúp rút gọn: repeat(3, 1fr) tương đương 1fr 1fr 1fr.
Đơn vị fr là gì?
Đơn vị fr (fraction) đại diện cho phần của không gian còn lại sau khi phân bổ các track có kích thước cố định. Ví dụ, grid-template-columns: 1fr 3fr nghĩa là hai cột chia tỷ lệ 25% và 75%. Đơn vị fr linh hoạt hơn % vì không bị vỡ khi thêm padding hoặc gap. Bạn cũng có thể kết hợp với đơn vị tuyệt đối: 500px 1fr 2fr nghĩa là cột đầu lấy 500px trước, phần còn lại chia theo tỷ lệ.
Gap
Thuộc tính gap tạo khoảng cách giữa các ô grid, thay cho margin hack phức tạp trước đây. gap: 20px áp dụng cho cả hàng và cột. Bạn cũng có thể dùng row-gap và column-gap để đặt riêng biệt.
Grid template areas
Tính năng mạnh nhất của CSS Grid là khả năng đặt tên vùng layout. Bạn sử dụng grid-template-areas trên container kết hợp grid-area: tên trên item. Kết quả là nhìn CSS là thấy ngay sơ đồ trang — MDN gọi đây là phương pháp “ascii-art layout”.
Ví dụ về layout trang tiêu chuẩn:
.wrapper { display: grid; grid-template-areas: "hd hd hd" "sd main main" "ft ft ft"; grid-template-columns: 200px 1fr 1fr; }
Để đổi layout theo màn hình, bạn chỉ cần định nghĩa lại grid-template-areas trong media query — toàn bộ thay đổi nằm ở một chỗ duy nhất.
Responsive layout không cần media query
Một trong những mẫu phổ biến nhất của CSS Grid là lưới card responsive hoàn toàn tự động. Kết hợp repeat() với auto-fit và minmax(), bạn có thể tạo layout tự động co giãn:
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
minmax(250px, 1fr) nghĩa là mỗi cột có chiều rộng tối thiểu 250px và tối đa mở rộng hết phần không gian còn lại. auto-fit tự động tạo càng nhiều cột càng tốt vừa với container — màn hình rộng hiển thị 4 cột, hẹp tự co xuống 2-1 cột, không cần viết một dòng media query nào. Đây là mẫu lưới card responsive phổ biến nhất hiện nay.
Các use case phổ biến của CSS Grid
- Layout toàn trang: Header, sidebar, content area và footer bằng grid-template-areas — chuẩn cho blog, trang admin, landing page.
- Lưới card sản phẩm: Dùng auto-fit và minmax để tự động responsive, phù hợp cho trang danh sách sản phẩm, blog posts, portfolio.
- Dashboard: Lưới widget 2D với item trải nhiều hàng hoặc cột bằng
grid-column: span 2— Flexbox không làm được điều này mượt mà. - Media object: Ảnh + text bên cạnh nhau trong component nhỏ — kết hợp Grid hoặc Flexbox đều được.
Hỗ trợ trình duyệt
Theo caniuse, CSS Grid đã được hỗ trợ đầy đủ trên tất cả trình duyệt chính: Chrome, Edge, Firefox, Safari (bao gồm iOS), Samsung Internet. Bạn có thể sử dụng Grid thoải mái trong mọi dự án sản xuất. CSS Grid Level 2 bổ sung tính năng subgrid cũng đã được hỗ trợ rộng rãi trên Firefox, Safari và Chrome.
Nếu bạn đang bắt đầu với CSS layout, hãy học CSS Grid trước tiên vì nó giải quyết được phần lớn bài bố cục hiện đại. Sau đó bổ sung Flexbox cho các component nhỏ hơn. Hai công cụ này là nền tảng cần thiết cho mọi lập trình viên web hiện nay.
Tham khảo thêm
- MDN – CSS Grid Layout – Tổng quan đầy đủ về module CSS Grid
- CSS-Tricks – Complete Guide to CSS Grid – Hướng dẫn chi tiết với ví dụ thực hành
- Can I Use – CSS Grid – Bảng hỗ trợ trình duyệt chi tiết
