Tài sản lưới là gì?

Thuộc tính lưới là một thuộc tính tốc ký cho các hàng-lưới-hàng, lưới-cột-cột, lưới-mẫu-khu vực, lưới-tự động-hàng, cột lưới tự động, lưới tự động-luồng, lưới-cột và các thuộc tính khoảng cách hàng lưới.

Cấu trúc lưới

Thuộc tính lưới làm cho các phần tử hiển thị như ma trận

 
 
 
 
 
 
 
 

Trong css

#thùng đựng hàng {
 hiển thị: lưới;
 }

Trong ví dụ, #container được hiển thị dưới dạng lưới và phần tử con của nó sẽ được hiển thị dưới dạng các ô hoặc các mục lưới

Tính tương thích của trình duyệt web

Nó rất phấn khích khi IE, Edge, Firefox hỗ trợ thuộc tính lưới CSS. Hầu hết tất cả các trình duyệt có giao diện người dùng xem lưới tuyệt đẹp trong các công cụ dành cho nhà phát triển.

Đường lưới

Các đường lưới là các đường ngang và dọc, chúng được sử dụng để định vị. Chỉ số định vị có thể là một số nguyên (cả số nguyên âm và số nguyên dương).

Thuộc tính → lưới-cột-bắt đầu, lưới-cột-cuối, lưới-cuối-cuối, lưới-hàng-cuối.

Mã mẫu:

#grid> div: con thứ n (2) {
 lưới-cột-bắt đầu: 2;
 lưới-cột-cuối: 3;
 lưới-hàng-bắt đầu: 2;
 lưới-hàng-cuối: 3;
}

Phần tử 2 sẽ bắt đầu ở dòng dọc thứ hai trong 2 dòng ngang và phần tử sẽ kết thúc ở 3 dòng dọc và 3 dòng dọc.

Đường lưới

Ô lưới

Một ô lưới là một không gian giữa hai đường lưới dọc liền kề và hai đường lưới ngang liền kề.

Ô lưới

Bản nhạc lưới

Một rãnh lưới là một không gian giữa hai đường lưới liền kề. tức là hàng, cột.

Theo dõi lưới

Khu vực lưới & khoảng cách lưới

Một vùng lưới là nhóm của một hoặc nhiều ô.

Grid Gap là khoảng trống giữa các hàng và các cột. Đây là thuộc tính tốc ký của khoảng cách giữa các hàng và lưới-cột.

Cột hàng & lưới cột

lưới hàng là thuộc tính tốc ký cho lưới hàng bắt đầu và lưới hàng cuối.

cột lưới là thuộc tính tốc ký cho bắt đầu cột lưới và kết thúc cột lưới

Hàng lưới

lưới-hàng-bắt đầu → chỉ định một mục lưới Vị trí bắt đầu trong hàng

eg.grid-row-start: 2 → Element sẽ bắt đầu ở hàng dọc thứ hai

lưới-hàng-cuối → chỉ định một mục lưới Vị trí cuối của hàng trong hàng

eg.grid-row-end: 3 → Element sẽ kết thúc ở hàng dọc thứ hai

Lưới tự động chảy

Nó kiểm soát cách thức hoạt động của thuật toán vị trí tự động. Theo mặc định, giá trị là hàng (Các mục được đặt trong cơ sở hàng)

lưới-tự động chảy: hàng;
lưới-tự động chảy: cột;
Cột dòng tự động lưới & hàng dòng tự động lưới

Grid-auto-Flow: hàng dày đặc → Sử dụng thuật toán đóng gói mật độ dày đặc. Lấp đầy không gian trống trong lưới trên cơ sở hàng.

Grid-auto-Flow: cột dày đặc → Sử dụng thuật toán đóng gói của bộ lọc dày đặc. Làm đầy không gian trống trong lưới trên cơ sở cột

Lưới rõ ràng và lưới ngầm

Lưới rõ ràng là lưới được tạo bởi người dùng bằng cách sử dụng lưới-mẫu-hàng, lưới-mẫu-cột

lưới-mẫu-cột: lặp lại (3, 100px);
lưới-mẫu-hàng: 100px 100px;

Lưới ngầm được tạo bởi trình duyệt. Kích thước của lưới ẩn có thể được sửa đổi bằng cách sử dụng các cột lưới tự động và cột lưới tự động hàng.

lưới-mẫu-cột: lặp lại (3, 100px);
lưới-tự động hàng: 100px;

Thứ tự lưới:

Chúng ta có thể đặt các phần tử theo thuộc tính khu vực mẫu.

chúng ta có thể thay đổi vùng mẫu trong truy vấn phương tiện và hiển thị cấu trúc lưới mới.

kiểm tra codepen để biết thêm.

Đối với lưới, hầu hết tất cả chúng ta đều sử dụng hệ thống lưới bootstrap. Bootstrap có thể thay đổi một số tên lớp trong mọi phiên bản (Nhưng không giống như Angular ), vì vậy chúng ta cần nhớ phiên bản nào có tên lớp .

Bằng cách sử dụng thuộc tính lưới CSS, Chúng tôi CÓ THỂ (ngay cả trong IE) dễ dàng hiển thị các thành phần trong chế độ xem lưới.

Cảm ơn nhiều vì đã đọc! Nếu bạn thích nó, xin vui lòng hỗ trợ bằng cách vỗ tay và chia sẻ bài viết. Hãy để lại nhận xét bên dưới.