Κλασματικές μονάδες fr στα CSS Grids

Οι τιμές που καθορίζονται σε μονάδες 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: 1fr 0.5fr 2.5fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат: