[Series Responsive Web Design] Phần 4: CSS Grid - Trùm cuối thống trị layout 2 chiều siêu cấp VIP Pro

Chào anh em thiện lành! Hôm nay chúng ta sẽ chốt sổ series Responsive bằng một "pháp bảo" tối thượng mang tên CSS Grid. Các ứng dụng web ngày nay có giao diện ngày càng phức tạp, nếu chỉ dùng Flexbox thì thực sự vẫn chưa đáp ứng tốt nhất. Tại sao ư? Vì Flexbox chỉ hỗ trợ tạo bố cục 1 chiều (ngang hoặc dọc) , việc bố trí trang web 2 chiều sẽ gặp rất nhiều khó khăn.

Giờ là lúc CSS Grid xuất trận!

1. CSS Grid là thần thánh phương nào?

Bố cục Grid là một hệ thống bố cục 2 chiều (x,y) được dùng trong thiết kế UI. Theo Mozilla, nó là một lưới tổ hợp các đường ngang và dọc cắt nhau, tạo ra các cột và hàng để ta tha hồ "đặt gạch" các phần tử lên đó.

2. Từ vựng "nhập môn" hệ phái Grid

Trước khi code, anh em cần thuộc nằm lòng 4 thuật ngữ này để không bị "tẩu hỏa nhập ma":

Grid Column: Các đường thẳng đứng của một bố cục. Grid Row: Các đường ngang của một bố cục. Grid Gap: Khoảng trống giữa mỗi cột hoặc hàng. Nhờ cái này mà anh em không cần phải dùng margin lằng nhằng nữa! Grid Line: Các dòng kẻ ngang và dọc phân chia layout thành các hàng và cột. Đây là mấu chốt để anh em xác định vị trí các phần tử.

3. Bày binh bố trận với Grid-Container (Khung chứa)

CSS Grid được cấu thành từ hai thành phần chính là grid-container và grid-item.

Để khai mở sức mạnh, anh em ốp ngay display: grid; cho vùng chứa. Kế tiếp, dùng 2 thuộc tính này để chia lưới

grid-template-columns: Xác định số lượng và độ rộng của các cột. (Dùng auto nếu muốn các cột rộng bằng nhau ). grid-template-rows: Xác định số lượng và chiều cao của các hàng.

Bonus: Anh em có thể dùng justify-content để căn chỉnh nội dung item bên trong vùng chứa theo chiều ngang và align-content để căn chỉnh theo chiều dọc.

4. Thao túng Grid-Item (Phần tử con)

Lưới đã chia xong, giờ là lúc ném các grid-item vào đúng vị trí:

grid-column & grid-row: Dùng để xác định vị trí bắt đầu và kết thúc của một item bất kỳ (tính theo số thứ tự của Grid Line). Ví dụ grid-column: 1/3; nghĩa là phần tử bắt đầu từ cột kẻ số 1 đến cột kẻ số 3 (chiếm 2 cột).

Tuyệt chiêu grid-area: Thuộc tính này có thể được sử dụng để gán "tên" cho các item. Sau đó, anh em chỉ cần xếp tên chúng lên container thông qua grid-template-areas. Ví dụ xếp chữ 'header header header' trải dài 3 cột, hay 'menu main right'. Đọc code mà cảm giác như đang xếp hình Lego vậy, cực kỳ trực quan!

5. Đánh giá ưu nhược điểm

Ưu điểm: Cân tất layout 2 chiều cả ngang lẫn dọc , cực kỳ dễ kiểm soát khoảng cách và tùy biến siêu linh hoạt với Responsive. Chỉ cần đổi lại grid-template-columns: auto; trong @media screen là giao diện tự động xếp thành 1 dọc thẳng đứng trên mobile.

Nhược điểm: Tốn kha khá thời gian để học vì nhiều cú pháp mới , và một số trình duyệt đời tống có thể chưa hỗ trợ. Dù vậy, anh em cứ yên tâm vì Chrome, Firefox, Safari hiện đại đều đã support tận răng rồi