Cellpercent

Percentage sizing inside grid cells. Each bar is a direct grid child sized to a % of its cell: the 1fr value column, shared across rows, so the bars are comparable. A sized grid item keeps its size and sits at the cell's start (left), which is exactly what turns "% of the cell" into a horizontal bar chart. The label column is max-content; the bars fill the row height.

Layout 440 × 186 <box><grid><text>

Result

Source examples/cellpercent.svgn

<diagram width="440" padding="18" background="#fbfbfb" theme="light">
  <!-- Percentage sizing inside grid cells. Each bar is a direct grid child sized
       to a % of its cell: the 1fr value column, shared across rows, so the bars
       are comparable. A sized grid item keeps its size and sits at the cell's
       start (left), which is exactly what turns "% of the cell" into a horizontal
       bar chart. The label column is max-content; the bars fill the row height. -->
  <grid columns="max-content 1fr" rows="repeat(4, 30)" column-gap="14" row-gap="10">
    <text text-align="right">Alpha</text>
    <box width="82%" fill="#4f6b9c" rx="4"/>
    <text text-align="right">Bravo</text>
    <box width="64%" fill="#5f79a8" rx="4"/>
    <text text-align="right">Charlie</text>
    <box width="93%" fill="#6f87b4" rx="4"/>
    <text text-align="right">Delta</text>
    <box width="38%" fill="#7f95c0" rx="4"/>
  </grid>
</diagram>

Open the SVG →