Pixel và đơn vị fr trong CSS Grid
Có thể thiết lập chiều rộng cho các cột
đồng thời bằng pixel và
fr:
<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: 100px 1fr 50px;
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 đầu tiên
chiếm 100px, còn hai cột
còn lại có kích thước bằng nhau.
Giả sử grid của bạn có bốn cột.
Hãy làm sao cho cột đầu tiên và cột cuối cùng
chiếm 100px,
còn các cột còn lại chia nhau không gian còn lại
sao cho cột thứ ba lớn gấp 1.5
lần cột thứ hai.
