Unit Pecahan fr dalam Grid CSS

Nilai yang dinyatakan dalam unit fr, boleh mengambil bentuk pecahan. Mari ubah contoh sebelumnya, dengan menyatakan untuk lajur kedua dan ketiga lebar dalam nombor pecahan:

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

Результат: