Hướng dẫn về CSS Grid Layout Fr Unit
Các Mô-đun bố trí lưới CSS đã được vận chuyển với một đơn vị CSS mới được gọi là fr đơn vị. Càng đơn giản càng tốt, fr là viết tắt của từ “phân số”. Đơn vị mới giúp có thể nhanh chóng cắt lưới thành các cột hoặc hàng theo tỷ lệ. Kết quả là, việc tạo ra lưới đáp ứng đầy đủ và linh hoạt trở nên gần như một làn gió.
Vì đơn vị phân số được giới thiệu cùng với mô đun Bố cục lưới, bạn có thể sử dụng nó trong bất kỳ trình duyệt nào hỗ trợ lưới CSS. Nếu bạn cũng muốn hỗ trợ các trình duyệt cũ hơn thì đây là một điều tuyệt vời Polyfill lưới CSS cho phép bạn sử dụng không chỉ fr đơn vị nhưng các tính năng lưới khác là tốt.
Sử dụng cơ bản
Đầu tiên, chúng ta hãy nhìn vào một lưới cơ bản sử dụng đơn vị phân số. Bố cục bên dưới chia không gian thành ba cột có chiều rộng bằng nhau và hai hàng có chiều cao bằng nhau.
HTML thuộc về được tạo thành từ sáu div đánh dấu bằng .cái hộp lớp học, bên trong .vỏ bánh div.
1.2.3.4.5.6.
Để sử dụng mô-đun Bố cục lưới, bạn cần thêm hiển thị: lưới; Thuộc tính CSS cho trình bao bọc. Các lưới-mẫu-cột tài sản sử dụng fr đơn vị là giá trị; các tỷ lệ của ba cột là 1: 1: 1.
Đối với các hàng lưới (lưới-mẫu-hàng tài sản), tôi đã không sử dụng fr đơn vị, vì nó chỉ có ý nghĩa nếu bao bọc có chiều cao cố định. Mặt khác, nó có thể có kết quả lạ trên một số thiết bị, tuy nhiên, ngay cả khi đó, fr đơn vị không duy trì tỷ lệ (và điều này là rất lớn).
Các khoảng cách lưới bất động sản thêm lưới 10px ở giữa các hộp. Nếu bạn không muốn bất kỳ khoảng cách, chỉ cần loại bỏ tài sản này.
.trình bao bọc hiển thị: lưới; lưới-mẫu-cột: 1fr 1fr 1fr; lưới-mẫu-hàng: 200px 200px; khoảng cách lưới: 10px; .box màu: trắng; văn bản-align: trung tâm; cỡ chữ: 30px; phần đệm: 25px;
Lưu ý CSS ở trên không chứa một số kiểu dáng cơ bản như màu nền. Bạn có thể tìm mã đầy đủ trong bản demo ở cuối bài viết.
Thay đổi tỷ lệ
Tất nhiên, bạn không thể chỉ sử dụng 1: 1: 1 nhưng bất kỳ tỷ lệ nào bạn muốn. Dưới đây, tôi đã sử dụng Phân số 1: 2: 1 cũng chia không gian thành ba cột nhưng cột giữa sẽ là rộng gấp đôi như hai người kia.
Tôi cũng tăng giá trị của khoảng cách lưới để bạn có thể thấy cách nó thay đổi bố cục. Về cơ bản, trình duyệt khấu trừ khoảng cách lưới từ chiều rộng khung nhìn (trong ví dụ này, các khoảng trống lưới thêm tới 80px) và cắt phần còn lại theo các phân số đã cho.
.trình bao bọc hiển thị: lưới; lưới-mẫu-cột: 1fr 2fr 1fr; lưới-mẫu-hàng: 200px 200px; khoảng cách lưới: 40px;
Phối hợp fr với các đơn vị CSS khác
Bạn có thể phối hợp các fr đơn vị với bất kỳ đơn vị CSS nào khác cũng. Ví dụ, trong ví dụ dưới đây, tôi đã sử dụng 60% 1fr 2fr tỷ lệ cho lưới của tôi.
Vì vậy, làm thế nào để làm việc này? Các trình duyệt chỉ định 60% chiều rộng khung nhìn đến cột đầu tiên. Sau đó, nó chia phần còn lại của không gian thành các phân số 1: 2.
Điều tương tự cũng có thể được viết là 60% 13.33333% 26.66667%. Nhưng thẳng thắn, tại sao mọi người muốn sử dụng định dạng đó? Một lợi thế rất lớn của đơn vị phân số là nó cải thiện khả năng đọc mã. Hơn nữa, nó hoàn toàn chính xác, vì định dạng phần trăm vẫn chỉ tăng tối đa 99,9999%.
.trình bao bọc hiển thị: lưới; lưới-mẫu-cột: 60% 1fr 2fr; lưới-mẫu-hàng: 200px 200px; khoảng cách lưới: 10px;
Ngoài tỷ lệ phần trăm, bạn cũng có thể sử dụng các đơn vị CSS khác cùng với đơn vị phân số, ví dụ pt, px, em, và còn lại.
Thêm khoảng trắng với fr
Điều gì sẽ xảy ra nếu bạn không muốn thiết kế của mình bị lộn xộn và thêm một số khoảng trắng vào lưới của bạn? Đơn vị phân số cũng có một giải pháp dễ dàng cho điều đó.
Như bạn thấy, lưới này có một cột trống trong khi nó vẫn giữ lại tất cả sáu hộp Đối với bố cục này, chúng ta cần phải cắt không gian thành bốn cột thay vì ba. Vì vậy, chúng tôi sử dụng 1fr 1fr 1fr 1fr giá trị cho lưới-mẫu-cột bất động sản.
Chúng tôi thêm cột trống bên trong khu vực lưới-mẫu tài sản, sử dụng ký hiệu chấm. Về cơ bản, tài sản này cho phép bạn tham chiếu tên khu vực lưới. Và, bạn có thể đặt tên cho các khu vực lưới với khu vực lưới tài sản mà bạn cần sử dụng riêng cho từng khu vực.
.trình bao bọc hiển thị: lưới; lưới-mẫu-cột: 1fr 1fr 1fr 1fr; lưới-mẫu-hàng: 200px 200px; khoảng cách lưới: 10px; lưới-mẫu-khu vực: "hộp-1 hộp-2. hộp-3" "hộp-4 hộp-5. hộp-6"; .box-1 khu vực lưới: hộp-1; .box-2 khu vực lưới: hộp-2; .box-3 khu vực lưới: hộp-3; .box-4 khu vực lưới: hộp-4; .box-5 khu vực lưới: hộp-5; .box-6 khu vực lưới: hộp-6;
Các khu vực khoảng trắng không nhất thiết phải tạo thành một cột, họ có thể ở bất cứ đâu trong lưới điện.
Các nói lại() chức năng
Bạn cũng có thể sử dụng fr đơn vị cùng với nói lại() chức năng cho một cú pháp đơn giản hơn. , Điều này là không cần thiết nếu bạn chỉ có một lưới đơn giản nhưng có thể có ích khi bạn muốn thực hiện một bố cục phức tạp, ví dụ một lưới lồng nhau.
.trình bao bọc hiển thị: lưới; lưới-mẫu-cột: lặp lại (3, 1fr); / * lưới-mẫu-cột: 1fr 1fr 1fr; * / lưới-mẫu-hàng: 200px; khoảng cách lưới: 10px;
Các lặp lại (3, 1fr) cú pháp kết quả trong cùng một bố cục như 1fr 1fr 1fr. Bố cục bên dưới giống như ví dụ đầu tiên.
nếu bạn tăng số nhân bên trong nói lại() chức năng bạn sẽ có nhiều cột hơn. Ví dụ, lặp lại (6, 1fr) kết quả trong sáu cột bằng nhau. Trong trường hợp này, tất cả các hộp của chúng tôi sẽ ở cùng một hàng, có nghĩa là nó chỉ đủ để sử dụng một giá trị (200px) cho lưới-mẫu-hàng bất động sản.
.trình bao bọc hiển thị: lưới; lưới-mẫu-cột: lặp lại (6, 1fr); lưới-mẫu-hàng: 200px; khoảng cách lưới: 10px;
Bạn có thể dùng nói lại() nhiều hơn một lần. Chẳng hạn, ví dụ sau dẫn đến một lưới trong đó ba cột cuối cùng là rộng gấp đôi như ba người đầu tiên.
.trình bao bọc hiển thị: lưới; lưới-mẫu-cột: lặp lại (3, 1fr) lặp lại (3, 2fr); lưới-mẫu-hàng: 200px; khoảng cách lưới: 10px;
Bạn cũng có thể phối hợp nói lại() với các đơn vị CSS khác. Chẳng hạn, bạn có thể sử dụng Lặp lại 200px (4, 1fr) 200px như một mã hợp lệ.
Nếu bạn quan tâm làm thế nào để tạo bố cục phức tạp với mô-đun CSS Grid, nói lại() chức năng và fr đơn vị Rachel Andrew có một bài đăng blog thú vị về cách bạn có thể làm điều đó.
Một bản demo để thử nghiệm
Cuối cùng, đây là bản demo tôi đã hứa. Nó sử dụng cùng mã với ví dụ đầu tiên trong bài viết này. Ngã ba nó, và xem những gì bạn có thể đạt được với fr đơn vị.
