Đơ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