Item i

Example

<div class="item-i" style="--i: 3">
  <i style="--value: 60"></i>
  <i style="--value: 200"></i>
  <i style="--value: 150"></i>
  <i style="--value: 110"></i>
  <b><output></output></b>
</div>

@property --result { syntax: '<integer>'; inherits: true; initial-value: 0; }
.item-i output::after { counter-reset: result var(--result); content: counter(result); }
.item-i { display: inline-grid; width: max-content; }
.item-i > i { grid-row: 1; width: calc(var(--value) * 1px); }
.item-i > b { grid-row: 2; grid-column: var(--i); container-type: inline-size; }
.item-i > b > output { --result: round(100cqw / 1px); }
/* only places the answer at the grid's start */
.item-i { position: relative; }
.item-i > b { min-height: 1lh; }
.item-i > b > output { position: absolute; left: 0; }

Limits

• a whole-number --i from 1 to the number of items, written without a decimal point: 3.0 is not an <integer>, so the box falls back to column 1; calc() rounds a fraction to the nearest whole number, so calc(2.6) reads track 3
• one item per track, its width 0 or more
• the grid at its natural width (width: max-content): a grid stretched by its parent, as an item of a grid or of a column flexbox, stretches its auto columns, and the read with them
• 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
• 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.