Trong phần hướng dẫn này, chúng tôi sẽ lấy lưới từ bài hướng dẫn trước của chúng tôi và sử dụng nó như một sân chơi [mã thực thi ở bất cứ đâu] để tìm hiểu sâu hơn về Lưới. Chúng ta sẽ cải tiến cách thức mà chúng ta định nghĩa các máng xối của chúng ta, khảo sát tỷ lệ bố trí linh động, đơn vị fr và giới thiệu chức năng
grid-template-columns: 30% 5% 30% 5% 30%;4
Các hoạt động đơn vị
Đặc điểm lớn nhất của Grid là cho phép chúng tôi kiểm tra bố cục kiểm soát một cách chính xác trên trang web, do đó hãy biến lưới của chúng tôi thành động trước khi chúng tôi tiếp tục đi sâu hơn. Nếu như bạn còn nhớ, chúng ta đã định nghĩa lưới của chúng ta bằng đơn vị kích thước pixel
grid-template-columns: 150px 20px 150px 20px 150px; grid-template-rows: auto 20px auto 20px auto;
Hoàn toàn có thể sử dụng các đơn vị khác ở đây, chẳng hạn như em, hoặc rem. Hoặc ngay cả những đơn vị ít được sử dụng như vh và vmin
Trong trường hợp này, chúng tôi sẽ thay đổi các pixel đơn vị thành phần trăm. Vì chúng ta đang thiết lập chiều rộng của các cột và các máng xối của chúng ta bằng tay, nên chúng ta phải đảm bảo tổng giá trị của các giá trị phải bằng 100%
grid-template-columns: 30% 5% 30% 5% 30%;
Save the distance
Có một cách mới hơn, hiệu quả hơn để xác định kích thước của máng xối, và đó là với một thuộc tính đặt biệt được tạo ra. Chúng ta có thể sử dụng
grid-template-columns: 30% 5% 30% 5% 30%;0 và
grid-template-columns: 30% 5% 30% 5% 30%;1 hoặc là cú pháp rút gọn
grid-template-columns: 30% 5% 30% 5% 30%;2
Sử dụng các công cụ này, chúng ta không còn cần phải thêm các grid track để sắp xếp các máng xối của chúng ta, chúng ta chỉ cần định nghĩa các cột và các dòng, vì thế trong trường hợp của chúng ta điều đó có nghĩa là
grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: auto auto auto;
Ồ, nó hơi rắc rối, nhưng nó làm tốt công việc. Sự khác nhau mà bạn sẽ thấy đó là chiều rộng cột bây giờ được thêm vào 100%;
cách mạng
Hãy viết cái này theo một cách rút gọn hơn, bằng cách sử dụng hàm
grid-template-columns: 30% 5% 30% 5% 30%;4
grid-template-columns: repeat[3, 33.33%];
Điều này nói rằng "lặp lại 33. 33% ba lần" tao ra cho chúng ta ba cột. Và chúng ta không còn cần thiết phải truy cập
grid-template-columns: 30% 5% 30% 5% 30%;4 bởi vì giá trị
grid-template-columns: 30% 5% 30% 5% 30%;5 đã được thiết lập mặc định. Bây giờ chúng ta chỉ cần chọn máng xối của chúng ta lớn thế nào mà thôi
grid-template-columns: repeat[3, 33.33%]; grid-gap: 20px;
grid-template-columns: 30% 5% 30% 5% 30%;2 sẽ chấp nhận đơn vị cố định hoặc là linh động, nó có nghĩa là chúng ta có thể kết hợp một cách hoàn hảo các cột động và máng xối cố định mà không cần phải tự tính toán phức tạp
Đặt lại các giá trị của grid-template-columns: 30% 5% 30% 5% 30%;
7 và grid-template-columns: 30% 5% 30% 5% 30%;
8
Có điều gì mà thiếu sót. chúng ta vẫn phải tải
grid-template-columns: 30% 5% 30% 5% 30%;7 và
grid-template-columns: 30% 5% 30% 5% 30%;8 trong các phần tử grid của chúng ta, nhưng tất cả chúng ta đều sai vì chúng ta không còn nhiều grid track. Thật có thể, bởi vì chúng ta đang sử dụng
grid-template-columns: 30% 5% 30% 5% 30%;2 để định nghĩa các máng xối của chúng ta, chúng ta có thể cho các phần tử tự động xác định vị trí, các phần tử sẽ không còn rơi vào trong các máng xối nữa. Hiện tại, loại bỏ tất cả các vị trí
fr Unit
Một bước cải tiến cuối cùng có thể được tạo ra để lưới của chúng ta đơn giản hơn; . Một đơn vị từ đơn mô tả "một phần của nhiều phần mà chúng ta chia đều nó". Ví dụ, chúng ta có thể định nghĩa các cột của chúng ta bằng cách sử dụng
grid-template-columns: 30% 5% 30% 5% 30%;6
Ở đây có tổng cộng ba cái đơn vị fr, vì vậy mỗi cột sẽ có một phần ba chiều rộng. Dưới đây là một ví dụ khác
grid-template-columns: 30% 5% 30% 5% 30%;7
Bây giờ có tổng cộng nhiều đơn vị fr, because the first column will chiếm một phần hai chiều rộng còn lại, với hai cột khác nhau mỗi cái chiếm một phần tư
Những đơn vị này thì thực sự mạnh mẽ, đặc biệt trong việc kết hợp với những đơn vị đo lường khác
grid-template-columns: 30% 5% 30% 5% 30%;8
Dưới đây chúng ta đã định nghĩa các cột
- đầu tiền có chiều rộng cố định là 300px
- cái cuối cùng thì linh hoạt với 20% chiều rộng của kho chứa lưới
- sau đó các đơn vị thứ được tính toán, để cho hai cột một phần của khoảng trống còn lại
- và cái thứ ba là ba phần
Nó trông giống như thế này, hoàn toàn làm nổi bật các vị trí tự động cũng như chín phần tử của chúng ta thay đổi để lấp đầy khoảng trống
Nhưng quay lại với grid ban đầu của chúng ta. Hãy thay thế các giá trị sự cố và không chính xác 33. 33% bằng 1fr
grid-template-columns: 30% 5% 30% 5% 30%;9
Pen hoàn thiện
Kết luận
Do đó, viết lại
- Grid sẽ chấp nhận các đơn vị linh hoạt trong việc kết hợp với các đơn vị đo lường cố định
- Chúng ta không cần định nghĩa các máng xối bên trong
grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: auto auto auto;
2 của chúng ta, thay vào đó chúng ta có thể sử dụng thuộc tínhgrid-template-columns: 30% 5% 30% 5% 30%;
2 grid-template-columns: 30% 5% 30% 5% 30%;
2 có nghĩa là chúng ta ít giới hạn vị trí các phần lưới điện tử của chúng ta-chúng ta có thể giao trách nhiệm nhiều hơn cho việc sắp đặt- Hàm
grid-template-columns: 30% 5% 30% 5% 30%;
4 sẽ tiết kiệm thời gian tiết kiệm thời gian cho chúng ta và giữ các biểu định kiểu dễ dàng bảo trì - Đơn vị fr hay phân số là một cách mạnh mẽ để mô tả các mẫu lưới [mẫu]
Chúng ta đã đi một con đường dài đầy mê hoặc chỉ trong hai hướng dẫn, nhưng bây giờ chúng ta là người tự hào vì một lưới rất đơn giản và ngắn gọn. Trong bài hướng dẫn tiếp theo chúng ta sẽ tìm hiểu các khu vực lưới, xem xét từ khóa
grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: auto auto auto;6 và một số bố cục mang tính thực thi