Bố cục lưới CSS: Đơn vị Fr

Với CSS Grid Layout, ta nhận được một đơn vị linh hoạt mới: đơn vị Fr. Fr là một đơn vị phân số và 1fr là cho 1 phần của không gian có sẵn. Sau đây là một vài ví dụ về đơn vị fr tại nơi làm việc. Các mục lưới trong các ví dụ này được đặt trên lưới với các vùng lưới .

---

.container {   display: grid;    grid-template-columns: 1fr 1fr 1fr 1fr;   grid-template-rows: 100px 200px 100px;    grid-template-areas:         "head head2 . side"         "main main2 . side"         "footer footer footer footer"; } 

4 cột đều chiếm cùng một lượng không gian.

Ví dụ sử dụng fr

Đây là ví dụ tương tự ở trên với các giá trị fr khác nhau. Lưu ý sự thay đổi trong bố cục:

.container {   /* ... */    grid-template-columns: 1fr 1fr 40px 20%;   grid-template-rows: 100px 200px 100px;    /* ... */ } 

---

Trong ví dụ cuối cùng sau đây, mục thanh bên bao gồm 2fr, vì vậy nó sẽ có cùng chiều rộng với các mục kéo dài cột 1 và 2:

.container {   /* ... */    grid-template-columns: 1fr 1fr 40px 2fr;   grid-template-rows: 100px 200px 100px;    /* ... */ } 

Đơn vị hỗn hợp

Như bạn đã thấy trong các ví dụ trước, bạn có thể trộn các giá trị fr với các giá trị phần trăm và cố định. Các giá trị fr sẽ được chia giữa khoảng trống còn lại sau những gì được lấy bởi các giá trị khác.

Ví dụ: nếu bạn có lưới với 4 cột như trong đoạn mã sau, cột thứ nhất sẽ là 300px, cột thứ hai là 80px (10% của 800px), cột thứ 3 và thứ 4 sẽ là 210px (mỗi cột chiếm một nửa không gian còn lại ):

main {   width: 800px;   display: grid;   grid-template-columns: 300px 10% 1fr 1fr;   /* 300px 80px 210px 210px */    grid-template-rows: auto; } 

---

---

Các tin liên quan

image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03
Tùy chỉnh gạch chân với trang trí văn bản trong CSS
2020-09-03
Giải thích về đơn vị CSS
2020-09-03
Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS
2020-09-03
Thuộc tính khoảng trắng CSS
2020-09-03
Drop Caps trong CSS sử dụng chữ cái đầu tiên và chữ cái đầu
2020-09-03