Phần trăm và đơn vị fr trong CSS Grid

Cùng với fr, bạn cũng có thể sử dụng các giá trị bằng %, chúng cũng xác định phần container mà một cột sẽ chiếm. Trong trường hợp này, đầu tiên kích thước của cột tính bằng % sẽ được tính toán, và phần không gian trống còn lại sẽ được chia thành các phân số (fraction):

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

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

Giả sử grid của bạn có ba cột. Hãy làm sao để cột đầu tiên chiếm 20%, và hai cột còn lại có kích thước bằng nhau.

Giả sử grid của bạn có năm cột. Hãy làm sao để cột đầu tiên chiếm 100px, cột thứ hai chiếm 20%, và các cột còn lại chia phần không gian còn lại sao cho mỗi cột lớn gấp đôi cột liền trước nó.