Bố cục lưới (grid layout) là một hệ thống layout 2 chiều mới trong CSS, đây không phải là một framework hay thư viện như các bạn thường thấy. Nó là một phần bổ sung cho ngôn ngữ CSS để giải quyết các vấn đề về layout 2 chiều một cách nhanh chóng, tiện dụng. Sử dụng Grid sẽ giúp nhanh chóng giải quyết các vấn đề khó khăn khi layout như kích thước, căn chỉnh và kiến trúc thiết kế. Những vấn đề này thường rất phức tạp khi sử dùng float hoặc flexbox. Bài viết này mở đầu series cùng học thêm về CSS Grid nhé. Nội dung bài viết được tổng hợp từ Mozilla và CSS-Trick.
Nội dung series bài viết CSS Grid:
- Tổng quan về CSS Grid
- CSS Grid: Container
- CSS Grid: Items
- CSS Grid: một số hàm và ví dụ thực tế
Giới thiệu
Chúng ta thường sử dụng CSS để sắp đặt bố cục layout cho trang web, nhưng trước khi grid ra đời, việc này thường rất phức tạp và rắc rối. Mọi người thường sử dụng CSS table để đặt layout, float, cố định vị trí bằng thẻ position và inline-block,.. rồi phải tương thích với nhiều kích cỡ màn hình khác nhau. CSS grid là một trong những module hữu ích nhất của CSS giúp giải quyết tất cả vấn đề này một cách đơn giản và dễ dàng.
CSS grid là gì?
Grid layout là một hệ thống layout 2 chiều (x,y) được dùng trong thiết kế UI. Theo định nghĩa từ Mozilla, grid (lưới) là một tổ hợp của những đường ngang và dọc cắt nhau – một nhóm xác định các cột và nhóm kia xác định các hàng. Các phần tử có thể được đặt lên lưới, dựa vào các đường hàng và cột này.
Trình duyệt tương thích
Hầu hết các trình duyệt hiện đại ngày nay đều có hỗ trợ Grid. Vậy nên việc áp dụng grid khi thiết kế sẽ sớm trở thành xu thế chung.
Một số thuật ngữ quan trọng
Trước khi bắt đầu đi tìm hiểu kỹ hơn về grid, chúng ta cần làm quen và nắm bắt một số thuật ngữ quan trọng sẽ dùng trong bài viết. Hãy chắc rằng bạn nắm rõ những thuật ngữ dưới đây, bởi chúng thường dễ gây hiểu nhầm. Mình cũng sẽ không việt hóa những thuật ngữ này để truyền đạt sát nghĩa gốc.
Grid Container
Đây là phần tử cha được áp dụng thuộc tính display: grid hoặc display: inline-grid. Phần tử container chính là phần tử sẽ chứa các item sẽ được layout trong ví dụ bên dưới.
<div class="container">
<div class="item item-0"></div>
<div class="item item-1"></div>
<div class="item item-2"></div>
</div>Grid Item
Phần tử này là phần tử con nằm trong container. Trong ví dụ bên dưới, phần tử lớp item chính là grid item, còn sub-item thì không phải nhé.
<div class="container">
<div class="item">
<p class="sub-item"></p>
</div>
<div class="item"></div>
</div>Grid Line
Các dòng kẻ ngang và dọc, phân chia layout của chúng ta thành các hàng và cột được gọi là grid line. Trong ví dụ bên dưới là các đường kẻ màu vàng gọi là column grid line.
Grid Track
Grid Track được định nghĩa là khoảng cách giữa 2 grid line. Bạn có thể hình dung nó tương tự là các cột hoặc hàng.
Grid Cell
Grid Cell được định nghĩa là vùng diện tích giữa 2 grid line hàng dọc và hàng ngang liên tiếp. Grid Cell là đơn vị cơ bản của hệ thống grid.
Grid Area
Grid Area là vùng diện tích được bao quanh bởi 4 đường grid line. Grid Area có thể chứa 1 hoặc nhiều grid cell.
Sau khi nắm vững một số kiến thức và khái niệm cơ bản về grid layout, mời các bạn tìm hiểu thêm về container và items ở phần tiếp theo.