Đơ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ố:

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: 1fr 0.5fr 2.5fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат: