Đơn vị fr
Đơn vị linh hoạt fr
biểu thị một phần hoặc một phân số của tổng
kích thước không gian mà phần tử nằm trong đó.
Ưu điểm của việc sử dụng
fr là khả năng thích ứng với
các container hoặc độ phân giải màn hình khác nhau,
vì fr chỉ đơn giản phân phối toàn bộ không gian thành số
lượng phân số (phần) đã chỉ định mà không ràng buộc với kích thước
chính xác của chúng bằng pixel.
Ví dụ
Hãy sử dụng thuộc tính
grid-template-columns
để làm sao cho cột đầu tiên và cột thứ hai
của grid chiếm một phần container,
và cột thứ ba - ba phần:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Ví dụ
Các giá trị được chỉ định bằng đơn vị fr
có thể ở dạng phân số. Hãy
thay đổi ví dụ trước, chỉ định
cho cột thứ hai và thứ ba chiều rộng
bằng số thập phân:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Xem thêm
-
đơn vị
px,
thiết lập kích thước bằng pixel -
đơn vị
em,
thiết lập kích thước bằng em -
đơn vị
rem,
thiết lập kích thước bằng rem -
đơn vị
%,
thiết lập kích thước bằng phần trăm -
đơn vị
vw,
thiết lập kích thước bằng vw -
đơn vị
vh,
thiết lập kích thước bằng vh -
đơn vị
vmax,
thiết lập kích thước bằng vmax -
đơn vị
vmin,
thiết lập kích thước bằng vmin