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ố trí cục bộ 1 chiều được sử dụng ở hầu hết 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ố trí cục bộ 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. Lưới CSS
CSS Grid là một hệ thống bố cục cục bộ dựa trên lưới 2. Mục tiêu đí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 lưới phù hợp để thiết kế các trang web có độ phức tạp cao
CSS Grid giới hạn thuộc tính hiển thị với 2 value is grid
and inline-grid
Hộp chứa lưới
.grid-container {
display: grid / inline-grid;
}
display : grid
tạo lưới cấp khối [cấp độ khối]display : inline-grid
tạo ra một lưới cấp độ nội tuyến [cấp độ nội tuyến]
2. 1 Các thuộc tính cho thành phần cha [bộ chứa lưới]
grid-template-columns và grid-template-row. chia lưới thành các cột hàng
lưới-mẫu-cột. tương ứng với các cột số, 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
lưới-mẫu-hàng. tương ứng với các 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:...;
________số 8_______
Thí dụ. tạo bố cục dạng lưới, chia bố cục 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-grid
0
inline-grid
1. đâ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ên cú pháp sẽ là [tên muốn đặt cho cột hoặc hàng]
Ngoài ra, chúng ta có thể sử dụng phương thức lặp lại [số cột trên dòng, độ rộng cột] để chia cột và hàng trên lưới. Mình ví dụ inline-grid
2 nghĩa là grid được chia làm 4 cột và mỗi cột tương ứng 25% tương ứng với các chữ viết inline-grid
3
grid-template-khu vực. sắp xếp bố cục một cách nhanh chóng, đi vào ví dụ luôn luôn nhé
Giả sử bạn muốn thiết kế bố cục như sau
In layout on 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 nội dung và sidebar. Vì vậy chúng ta có 4 khối. tiêu đề, nội dung, thanh bên và chân trang
inline-grid
4
inline-grid
5
inline-grid
4
inline-grid
7
inline-grid
4
inline-grid
9
inline-grid
4inline-grid
4
.grid-container {
2
Tạo class cho item-header với thuộc tính .grid-container {
3
Tạo lớp cho mục-nội dung 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é. item-header ở hàng đầu tiên sẽ chiếm 4 cột do đó sẽ là toàn bộ hàng đầu tiên sẽ là 4 tiêu đề giá trị, tương tự như chân trang. Ở hàng thứ 2, item-content sẽ chiếm 2 cột nên sẽ là 2 giá trị nội dung. Dấu chấm là bỏ trống lấy 2 phần. At item-sidebar will get 1 column should value is 1 sidebar. Theo mình nghĩ thì việc tạo layout theo khu vực cũng khá đơn giản và nhanh chóng
display: grid / inline-grid;
0. is a shortand[gộp chung] cho 2 thuộc tính grid-template-columns và grid-template-rowdisplay: grid / inline-grid;
1. set size 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. điều chỉnh nội dung bên trong một mục lưới dọc theo hàng trục}
1
}
2
}
3. Thuộc tính này được căn chỉnh theo chiều dọc của mạng lưới theo 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 mục trong lưới
Thí dụ. 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 : grid
1}
8display : grid
3}
display : grid
5}
8display : grid
7}
display : grid
9. is shortand[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-grid
0. định nghĩa tên cho mục chứa trong container. Tham chiếu tới các thuộc tính grid-template-areas trong grid container
- Thuộc tính này mình đã đề cập đến trong mục grid-template-areas
display : inline-grid
1
display : inline-grid
2
}
display : inline-grid
4. Chỉnh sửa nội dung bên trong một mục lưới dọc theo hàng
display : inline-grid
1
display : inline-grid
6
}
pause
Vì thế là mình đã kết thúc bài viết chia sẻ về cách thiết kế bố cục 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.