Lê Bá Thanh Tuấn @lebathanhtuan
Theo dõi
545 8 18
Đã đăng vào ngày 2 tháng 4 năm 2019 4. 19 một. m. 1 phút đọc
8. 9K
0
7
CSS Grid Layout cơ bản- Report
- Add to series of me
Bài đăng này đã không được cập nhật trong 3 năm
trình duyệt
CSS Grid Layout đã có những bước nhảy vọt trong những năm qua và do đó bạn sẽ thấy các trình duyệt hỗ trợ cho nó khá tốt ở thời điểm hiện tại.
Lưới cho phép sắp xếp các thành phần trên một trang theo các vùng
thuật ngữ
1. Cột [Cột]
Các hàng dọc của các thành phần lưới được gọi là cột.
grid-template-columns
Ví dụ
HTML
1
2
3
4
5
6
7
8
9
grid-template-rows
2. Hàng [Hàng]
Hàng ngang của các thành phần lưới được gọi là hàng.
grid-template-rows
3. Gaps [Khoảng trống]
Khoảng cách giữa mỗi cột / hàng được gọi là khoảng trống.
grid-column-gap
grid-row-gap
grid-gap
Ví dụ
HTML
1
2
3
4
5
6
7
8
9
grid-template-rows
grid-template-rows
grid-template-rows
grid-template-rows
grid-template-rows
grid-template-rows
4. Dòng
Viền nằm giữa các cột và hàng.
1
2
3
4
5
6
7
8
9
hoặc
1
2
3
4
5
6
7
8
9
Ví dụ
HTML
1
2
3
4
5
6
7
8
9
grid-column-gap
grid-row-gap
grid-gap
grid-column-gap
grid-row-gap
grid-gap
- Bài ra bạn cũng có thể tùy chỉnh theo vùng bằng thuộc tính.
1
2
3
4
5
6
7
8
9
Ví dụ
HTML
1
2
3
4
5
6
7
8
9
CSS
1
2
3
4
5
6
7
8
9
Kết quả.
Lưới CSS Css
Đã đăng ký Bản quyền
- Report
- Add to series of me
Lê Bá Thanh Tuấn @lebathanhtuan
Theo dõi
545 8 18
Đã đăng vào ngày 2 tháng 4 năm 2019 4. 19 một. m. 1 phút đọc
8. 9K
0
7
CSS Grid Layout cơ bản- Report
- Add to series of me
Bài đăng này đã không được cập nhật trong 3 năm
trình duyệt
CSS Grid Layout đã có những bước nhảy vọt trong những năm qua và do đó bạn sẽ thấy các trình duyệt hỗ trợ cho nó khá tốt ở thời điểm hiện tại.
Set up a GridLưới cho phép sắp xếp các thành phần trên một trang theo các vùng
thuật ngữ
1. Cột [Cột]
Các hàng dọc của các thành phần lưới được gọi là cột. Bạn có thể điều chỉnh cột dựa theo thuộc tính sau.
grid-template-columns
Ví dụ
HTML
1
2
3
4
5
6
7
8
9
grid-template-rows
2. Hàng [Hàng]
Hàng ngang của các thành phần lưới được gọi là hàng. Bạn có thể điều chỉnh hàng dựa trên các thuộc tính sau [tương tự như cột].
grid-template-rows
3. Gaps [Khoảng trống]
Khoảng cách giữa mỗi cột / hàng được gọi là khoảng trống. Bạn có thể điều chỉnh kích thước khoảng cách bằng cách sử dụng một trong các thuộc tính sau.
grid-column-gap
grid-row-gap
grid-gap
Ví dụ
HTML
1
2
3
4
5
6
7
8
9
grid-template-rows
grid-template-rows
grid-template-rows
grid-template-rows
grid-template-rows
grid-template-rows
4. Dòng
Viền nằm giữa các cột và hàng. Bạn có thể tùy chỉnh cột mốc bằng cách css ở từng ô [ô] theo các thuộc tính sau
1
2
3
4
5
6
7
8
9
hoặc
1
2
3
4
5
6
7
8
9
Ví dụ
HTML
1
2
3
4
5
6
7
8
9
grid-column-gap
grid-row-gap
grid-gap
grid-column-gap
grid-row-gap
grid-gap
- Bài ra bạn cũng có thể tùy chỉnh theo vùng bằng thuộc tính.
1
2
3
4
5
6
7
8
9
Ví dụ
HTML
1
2
3
4
5
6
7
8
9
CSS
1
2
3
4
5
6
7
8
9
Kết quả. Cảm ơn các bạn đã theo dõi.
Lưới CSS Css
Đã đăng ký Bản quyền
- Report
- Add to series of me