Xin chào các bạn, mình đã trở lại rồi đây. Trong phần 1 mình đã giới thiệu cho các bạn về CSS Flexbox - một trong những hệ thống bố cục 1 chiều được sử dụng ở hầu như các trang Web hiện tại. Ở phần 2 này, mình tiếp tục chia sẻ cho các bạn một hệ thống bố cục dựa trên lưới 2 chiều với cả chiều dọc và chiều ngang, đó là CSS Grid. Chúng ta bắt đầu tìm hiểu nào !!!
Thuộc tính cơ bản của CSS Flexbox và CSS Grid
2. CSS Grid
CSS Grid là một hệ thống bố cục dựa trên lưới 2 chiều nhằm mục đích không làm gì khác hơn là thay đổi hoàn toàn cách chúng ta thiết kế giao diện người dùng dựa trên lưới.
Bố cục Grid phù hợp để thiết kế các website có độ phức tạp cao.
CSS Grid giới thiệu thuộc tính display với 2 giá trị là grid và inline-grid
Grid Container :
.grid-container { display: grid / inline-grid;}
display : gridtạo lưới cấp khối [block level].display : inline-gridtạo ra một lưới cấp độ nội dòng [inline level].
2.1 Các thuộc tính cho thành phần cha [grid container]
grid-template-columns và grid-template-rows : chia grid thành các cột các hàng.
grid-template-columns : tương ứng với số cột, các giá trị sẽ tương ứng với chiều rộng của các cột lần lượt từ trái sáng phải.
grid-template-rows : tương ứng với số hàng, các giá trị sẽ tương ứng với chiều cao của các hàng lần lượt từ trên xuống dưới.
grid-template-columns:...;
grid-template-rows:...;
Example : tạo layout dạng lưới, chia layout thành 5 cột và 3 hàng tương ứng với chiều rộng và chiều cao chứa trong 2 thuộc tính trên.
grid-template-columns: [first] 60px [line2] 70px [line3] auto [col4-start] 60px [five] 70px [end];
inline-grid0
inline-grid1 : đây là các tên chú thích cho từng hàng từng cột, có thể sử dụng hoặc không sử dụng. Lưu ý cú pháp đặt tên sẽ là [tên muốn đặt cho cột hoặc hàng]
Ngoài ra, chúng ta có thể dùng phương thức repeat [số cột trên dòng, độ rộng cột] để chia các cột và các hàng trên grid. Mình ví dụ inline-grid2 nghĩa là grid được chia làm 4 cột và mỗi cột tương ứng 25% tương tự với các viết inline-grid3
grid-template-areas : tạo bố cục layout một cách nhanh chóng, đi vào ví dụ luôn nhé.
Giả sử bạn muốn thiết kế layout như sau :
Trong layout trên chia làm 4 cột và 3 hàng : header chiếm chọn hàng 1, content chiếm 2 phần, sidebar chiếm 1 phần, footer chiếm chọn hàng cuối còn 1 phần nằm ở giữa content và sidebar. Vậy là chúng ta có 4 khối : header, content, sidebar và footer.
inline-grid4
inline-grid5
inline-grid4
inline-grid7
inline-grid4
inline-grid9
inline-grid4inline-grid4
.grid-container {2
Tạo class cho item-header với thuộc tính .grid-container {3
Tạo class cho item-content với thuộc tính .grid-container {4
Tạo class cho item-sidebar với thuộc tính .grid-container {5
Tạo class cho item-footer với thuộc tính .grid-container {6
Sau đó chúng ta thiết lập thuộc tính grid-template-areas cho grid-container như sau :
.grid-container {7
.grid-container {8
.grid-container {9
Mình giải thích qua nhé : ở hàng đầu tiên item-header sẽ chiếm 4 cột do đó sẽ là toàn bộ hàng đầu tiên sẽ là 4 giá trị header, tương tự với footer. Ở hàng thứ 2, item-content sẽ chiếm 2 cột nên sẽ là 2 giá trị content. Dấu chấm là bỏ trống lấy 2 phần. Ở item-sidebar sẽ lấy 1 cột nên giá trị là 1 sidebar. Theo mình nghĩ thì việc tạo layout theo areas cũng khá đơn giản và nhanh chóng.
display: grid / inline-grid;0 : là một shorthand[gộp chung] cho 2 thuộc tính grid-template-columns và grid-template-rows.display: grid / inline-grid;1 : thiết lập kích thước cho các đường lưới.- grid-column-gap và grid-row-gap : đây là 2 thuộc tính cũ
- col-gap và row-gap là 2 thuộc tính mới được sử dụng hiện tại
display: grid / inline-grid;2
display: grid / inline-grid;3
display: grid / inline-grid;4
display: grid / inline-grid;5
display: grid / inline-grid;6
display: grid / inline-grid;7
display: grid / inline-grid;8
}
}0 : căn chỉnh nội dung bên trong một mục lưới dọc theo trục hàng.}1
}2
}3 : thuộc tính này căn chỉnh lưới dọc theo trục hàng}4
}2
2.2. Các thuộc tính cho thành phần con [grid item]
}6 : xác định vị trí bắt đầu và kết thúc của item trong grid.
Example : item1 bắt đầu cột 1 và kết thúc ở cột 4, item2 bắt đầu ở cột 1 và kết thúc ở cột 2, item3 bắt đầu ở cột 1 và kết thúc ở cột 3 :
}7}8}9}
display : grid1}8display : grid3}
display : grid5}8display : grid7}
display : grid9 : là shorthand[gộp chung] của các thuộc tính grid-column-start, grid-column-end, grid-row-start, grid-row-end.
display : inline-grid0 : định nghĩa tên cho item chứa trong container. Tham chiếu tới thuộc tính grid-template-areas trong grid container
- Thuộc tính này mình đã đề cập đến ở mục grid-template-areas
display : inline-grid1
display : inline-grid2
}
display : inline-grid4 : Căn chỉnh nội dung bên trong một mục lưới dọc theo trục hàng.
display : inline-grid1
display : inline-grid6
}
Tạm kết
Vậy là mình đã kết thúc bài viết chia sẻ vể cách thiết kế layout sử dụng CSS Flexbox và CSS Grid. Hi vọng bài viết sẽ giúp các bạn trong quá trình tìm hiểu và làm việc.