Đơn vị fr trong CSS Grids

Kích thước của các hàng và cột trong grid có thể được đặt không chỉ bằng px, mà còn bằng đơn vị linh hoạt fr (fraction). Việc sử dụng các đơn vị này có nghĩa là tất cả không gian để sắp xếp các phần tử sẽ được chia thành các phần bằng nhau hoặc các phần. Mỗi phần tử có thể chiếm một phần nhất định của sự phân chia này. Hãy xem cách thực hiện.

Hãy sử dụng thuộc tính grid-template-columns để làm cho cột thứ nhất và thứ hai của grid chiếm một phần của 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>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Giả sử grid của bạn có hai cột. Hãy làm cho chúng có chiều rộng bằng nhau.

Giả sử grid của bạn có ba cột. Hãy làm cho chúng có chiều rộng bằng nhau.

Giả sử grid của bạn có ba cột. Hãy làm cho cột thứ ba lớn gấp đôi cột thứ nhất và thứ hai.