Đơn vị phân số fr trong CSS Grid
Các giá trị được chỉ định bằng đơn vị fr
có thể là dạng phân số. Hãy
sửa đổi ví dụ trước, chỉ định
chiều rộng cho cột thứ hai và thứ ba
bằng các số phân số:
<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 0.5fr 2.5fr;
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 cho cột thứ ba
lớn gấp 1.5 lần cột thứ nhất
và thứ hai.
Giả sử grid của bạn có ba cột.
Hãy làm sao cho cột thứ hai
lớn gấp 1.5 lần cột thứ nhất,
và cột thứ ba lớn gấp 2.5
lần cột thứ nhất.
