CSS Grid là gì?
CSS Grid (viết đầy đủ: CSS Grid Layout) là một hệ thống bố cục trong CSS, cho phép chia một trang web thành lưới hàng và cột, rồi đặt từng phần tử vào đúng ô lưới muốn. Khác với Flexbox chỉ sắp xếp được theo một chiều, CSS Grid kiểm soát được cả hàng lẫn cột cùng lúc.
Hình dung đơn giản: nếu Flexbox giống việc xếp hàng ghế trên một dòng, thì CSS Grid giống việc bố trí ghế trong cả một khán phòng, có thể chỉ định chính xác ghế nào ở hàng mấy, cột mấy, và một người có thể ngồi trải dài qua mấy chỗ.
Để hiểu CSS Grid hoạt động tốt, bạn cần biết trình duyệt đo màn hình như thế nào. Bài viewport là gì giải thích điều đó.
CSS Grid xuất hiện ở đâu trong việc làm web?
CSS Grid thích hợp nhất cho những bố cục phức tạp mà Flexbox khó xử lý gọn. Vài tình huống điển hình:
Layout trang web chuẩn: header chạy hết chiều ngang, sidebar bên trái, nội dung chính chiếm phần còn lại, footer chạy hết chiều ngang bên dưới. Chỉ cần vài dòng CSS Grid là xong, không cần dùng float hay position phức tạp.
Trang sản phẩm thương mại điện tử: 3-4 cột sản phẩm trên desktop, tự thu về 2 cột trên tablet, 1 cột trên điện thoại, mỗi sản phẩm vẫn thẳng hàng chính xác.
Trang bài viết kiểu tạp chí (magazine layout): bài nổi bật chiếm 2 cột, hai bài nhỏ chiếm 1 cột mỗi bài bên cạnh, tất cả thẳng hàng nhau dù chiều cao ảnh khác nhau.
Dashboard quản trị: nhiều widget, biểu đồ, bảng số liệu chia ô chính xác trên một màn hình rộng.
CSS Grid khác Flexbox ở chỗ nào?
Đây là điểm nhiều người hay nhầm. Cả hai đều là công cụ bố cục CSS, nhưng mỗi cái có thế mạnh riêng.
| Tiêu chí | CSS Grid | Flexbox |
|---|---|---|
| Chiều sắp xếp | Hai chiều (hàng lẫn cột cùng lúc) | Một chiều (ngang hoặc dọc) |
| Phù hợp với | Layout toàn trang, dashboard, tạp chí | Thanh nav, card, form, icon row |
| Kiểm soát item | Ô lưới định sẵn, item đặt vào ô chính xác | Item tự quyết kích thước linh hoạt |
| Dùng khi | Cần kiểm soát vị trí 2 chiều chính xác | Cần co giãn, phân bổ đều theo 1 chiều |
Thực tế dự án web thường dùng cả hai: CSS Grid chia layout lớn bên ngoài, Flexbox lo phần căn chỉnh bên trong từng ô lưới. Bài Flexbox là gì giải thích chi tiết về công cụ bổ sung này.
CSS Grid hoạt động như thế nào?
Khi bạn khai báo display: grid cho một khung, tất cả phần tử bên trong trở thành grid item và nằm trong lưới bạn định nghĩa.
Hai thuộc tính bạn dùng để chia lưới:
grid-template-columns: quyết định số cột và chiều rộng mỗi cột. Ví dụ grid-template-columns: 200px 1fr 200px tạo ra 3 cột: hai cột ngoài cố định 200px, cột giữa chiếm phần còn lại.
grid-template-rows: quyết định số hàng và chiều cao. Có thể để trống cho hàng tự co theo nội dung.
gap: khoảng cách giữa các ô lưới, thay thế cho gutter trong hệ lưới thiết kế. Bài breakpoint là gì giải thích cách lưới thay đổi theo kích thước màn hình.
Để một item trải dài qua nhiều cột, bạn dùng grid-column: 1 / -1. Con số -1 là cách viết tắt của “đến cột cuối cùng”, tiện khi không muốn đếm số cột.
Đơn vị fr (viết tắt của fraction, phần) là thứ làm CSS Grid mạnh hơn hẳn cách tính pixel thủ công. Thay vì tính 33.33%, bạn viết 1fr 1fr 1fr là có 3 cột đều nhau, tự co giãn theo bề ngang container.
Người không rành kỹ thuật cần biết gì về CSS Grid?
Nếu bạn là chủ doanh nghiệp hay quản lý nội dung, bạn không cần nhớ cú pháp CSS Grid. Nhưng biết khái niệm giúp bạn làm việc với đơn vị làm web dễ hơn nhiều.
Khi bạn nói “trang chủ cần 3 cột sản phẩm, header chạy hết chiều ngang, bên trái có thanh lọc”, thực ra bạn đang mô tả đúng y một bố cục CSS Grid. Người làm kỹ thuật nghe là hiểu ngay, không cần hỏi lại nhiều vòng.
Ngược lại, biết CSS Grid là có thật giúp bạn hiểu tại sao một số yêu cầu bố cục nghe đơn giản lại cần thời gian: đặt một ô lưới trải dài qua 2 cột trong khi ô bên cạnh chỉ chiếm 1 cột thực ra không khó, nhưng cần thiết kế lưới từ đầu chứ không phải “sửa nhanh” được.
Nếu bạn đang tìm đơn vị dựng website với bố cục đẹp, gọn trên mọi màn hình, dịch vụ thiết kế website responsive của Web22 có thể là nơi phù hợp để trao đổi.
Câu hỏi thường gặp về CSS Grid
CSS Grid có hỗ trợ trình duyệt cũ không?
CSS Grid hỗ trợ tốt trên tất cả trình duyệt hiện đại từ 2017 trở lại (Chrome, Firefox, Safari, Edge đều hỗ trợ). Gần như toàn bộ người dùng web hiện nay đều dùng trình duyệt đọc được CSS Grid.
CSS Grid có thay thế được Flexbox không?
Không hoàn toàn. CSS Grid giỏi bố cục hai chiều, Flexbox giỏi sắp xếp một chiều. Dùng cả hai cùng nhau trong một dự án là cách làm phổ biến và hợp lý.
CSS Grid khó học không?
Phần căn bản (grid-template-columns, gap, grid-column) nắm được trong một buổi. Phần nâng cao hơn như grid-template-areas, named lines cần thêm thực hành nhưng không quá phức tạp.
Khi nào nên dùng CSS Grid thay vì Flexbox?
Khi bạn cần bố cục theo hai chiều, đặt phần tử chính xác vào đúng vị trí trong một lưới. Nếu chỉ cần sắp xếp theo một chiều, Flexbox là đủ và đơn giản hơn. Khi cần chia layout toàn trang hoặc bố cục phức tạp, CSS Grid thích hợp hơn.