Turn pixel (px) values to fractional units (fr) for CSS Grid

turnPxValuesToFrUnits.ts

// Turn "px" values into "fr" values.
// e.g: column widths: [768, 384, 768] and total width 1920.
// 738 / 1920 = 0.4. * 1000 = 4fr
// Times 1000 because if it's something like 10px: 10 / 1920 = 0.005
// And we want to raise it to a full integer
export function turnPxValuesToFrUnits(
  fractionalValues: number[],
  total: number
) {
  return fractionalValues
    .map(fraction => Math.round((fraction / total) * 1000))
    .map(value => `${Number.isNaN(value) ? 1 : value}fr`)
    .join(" ");
}