Grid-gap trong css

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

1. 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
2. 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ính

   grid-template-columns: 30% 5% 30% 5% 30%;

   2

3. 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
4. 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ì
5. Đơ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