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:

html<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>
css#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;
}

Результат:

Задание 1

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.

Задание 2

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.