Size of an fr

Example

<div class="size-of-an-fr">
  <i style="--value: 60"></i>
  <i style="--value: 200"></i>
  <i style="--value: 150"></i>
  <b><output></output></b>
</div>

@property --result { syntax: '<integer>'; inherits: true; initial-value: 0; }
.size-of-an-fr output::after { counter-reset: result var(--result); content: counter(result); }
.size-of-an-fr { display: inline-grid; width: max-content; flex: none; grid-template-columns: 1fr 2fr 3fr; }
.size-of-an-fr > i { grid-row: 1; width: calc(var(--value) * 1px); }
.size-of-an-fr > b { grid-row: 2; grid-column: 1; container-type: inline-size; }
.size-of-an-fr > b > output { --result: round(100cqw / 1px); }

Limits

• the grid at its natural width (width: max-content): at any other width each fr track is still at least as wide as its item, so the query container reads its track, not one fr (held 200 or 1200 wide, both read 283 here)
• values of 0 or more: calc() clamps a negative width to 0
• no column gap: a percentage gap counts as 0 while the tracks are sized and takes its share after (10% reads 70 for 100)
• the grid, one fr times the weights’ total, under about 16 million px: 1fr 2fr 1000000fr reads 0 or 34 where one fr is 100
• one weighted track per item, written in grid-template-columns: an item past the written tracks gets an auto track
• weights of 1 or more
• the query container under a 1fr track: under another, it reads that track
• a ratio ending in .5 can read 1 low in Chrome, which reads some widths ending in .5 as the number below, 14.5 as 14 (Chrome 155: 1 of 30 random ratios; WebKit 26.4: none)
• a whole-number answer: the read rounds to 1px
• each answer under 1,000,000: from a million up, Chrome passes --result on as 1e+06, which counter-reset rejects, so the counter prints 0
• no margins, padding or borders on the items or the query containers: they add to the widths read, and 100cqw reads the content box
• the example at its own width as a flex item (flex: none here): a flex row shrinks it, and the read with it
• each query container stretched across its track (justify-items and justify-self at their defaults): aligned to a side or the center, it shrinks to its content, none, and reads 0
• no other registration of --result on the page: a later @property --result that doesn’t inherit leaves the read right and the counter at 0

Browser support

Each row gives the first versions that support every feature its example uses, by MDN’s browser-compat-data. The Example was run in Chrome 155, Safari’s WebKit 26.4 and Firefox 158.