Bento

Explicit line-number placement. A child can claim a track range by 1-based grid lines: grid-column="1 / 3" spans columns 1-2; grid-row="1 / 3" spans rows 1-2 (so "Featured" is a 2x2 tile). "Wide banner" spans two columns (grid-column="3 / 5"). Everything else auto-flows into the cells left free. Placement is unified with named areas + auto-flow behind one per-child track range, so track-sizing and painting didn't change.

Layout 440 × 328 <box><grid>

Result

Source examples/bento.svgn

<diagram width="440" padding="16" background="#fbfbfb" theme="light">
  <!-- Explicit line-number placement. A child can claim a track range by 1-based
       grid lines: grid-column="1 / 3" spans columns 1-2; grid-row="1 / 3" spans
       rows 1-2 (so "Featured" is a 2x2 tile). "Wide banner" spans two columns
       (grid-column="3 / 5"). Everything else auto-flows into the cells left free.
       Placement is unified with named areas + auto-flow behind one per-child track
       range, so track-sizing and painting didn't change. -->
  <grid columns="repeat(4, 1fr)" rows="repeat(3, 92)" gap="10">
    <box grid-column="1 / 3" grid-row="1 / 3" fill="#33415a" color="#ffffff" rx="10">Featured</box>
    <box grid-column="3 / 5" fill="#c9d6e5" color="#33415a" rx="10">Wide banner</box>
    <box fill="#dce8d6" rx="10"/>
    <box fill="#f2ddd7" rx="10"/>
    <box fill="#e9e6f2" rx="10"/>
    <box fill="#e6ecf3" rx="10"/>
    <box fill="#dce8d6" rx="10"/>
    <box fill="#f2ddd7" rx="10"/>
  </grid>
</diagram>

Open the SVG →