Khái quát
Ở thời điểm hiện tại trong lập trình và thiết kế web, có vô số cách để có thể phân chia bố cục, nào là sử dụng display inline, position, flex, table. Nhưng nỗi bật trên hết những thứ đó chính là grid.
Grid trong CSS được xin ra với mục đích chuẩn hóa và đơn giản hóa cách phân chia hệ thống bố cục dạng lưới.
Tất cả những yếu điểm của các cách khác gần như đã được xử lí hết với Grid. Không chỉ như vậy. Đi kèm với thuộc tính grid là những thuộc tính bổ trợ, những thuộc tính này rất ít, làm đúng nhiệm vụ và vai trò. Nhờ đó mà việc xử lí bố cục với Grid rất đơn giản và tường minh.
Mình chứng cho câu nói Grid hiện tại mạnh bật nhất trong việc thiết kế bố cục đó là các ông lớn trong framework frond-end như bootstrap vẩn đang dùng nó làm chủ đạo trong việc chia cột.
Cách triển khai
Để có thể triển khai được grid ta phải tạo ra 1 element để bao bọc toàn bộ các item nội dung bên trong và khai báo display:grid.
Cách chia cột trong Grid
Ta sẽ sử dụng grid-template-columns, muốn bao nhiêu cột ta sẽ tiến hành điền bấy nhiêu tham số.
Ví dụ muốn có ba cột, cột một 400px cột hai 200px cột ba có 100px ta sẽ ghi như sau:
Grid-template-columns: 400px 200px 100px.
Ngoài ra nếu muốn các cột tự căn đều nhau ta có thể sử dụng auto như sau: grid-template-colunms:auto auto auto.
Cách chia hàng trong Grid
Tương tự như cách chia cột, thì chia hàng ta sẽ sử dụng grid-template-rows.
Ví dụ: Grid-template-rows: 300px 300px 300px.
Mô tả: Tạo ra ba hàng mỗi hàng đều có kích thước 300px.
Thay đổi kích thước cột của một item
Để có thể thay đổi kích thước của một item ta cần lưu ý hai thuộc tính sau: grid-column-start và grid-column-end.
với grid-column-start là vị trí trên hàng của item, còn grid-column-end chính là vị trí mà nó muốn dài đến.
Thay đổi kích thước hàng của một item
Để có thể thay đổi kích thước của một item ta cần lưu ý hai thuộc tính sau: grid-row-start và grid-row-end.
với grid-row-start là vị trí trên cột của item, còn grid-row-end chính là vị trí mà nó muốn dài đến.