Aspect

aspect-ratio: an element derives whichever axis is left auto from the one it's given. The hero fills the stretch column's width and takes a 16:9 height; each thumbnail fills its 1fr grid column and takes a 1:1 (square) height. Same "resolve one axis, derive the other" hook as text wrapping.

Layout 384 × 322 <box><column><grid>

Result

Source examples/aspect.svgn

<diagram width="384" padding="16" background="#fbfbfb" theme="light">
  <!-- aspect-ratio: an element derives whichever axis is left auto from the one
       it's given. The hero fills the stretch column's width and takes a 16:9
       height; each thumbnail fills its 1fr grid column and takes a 1:1 (square)
       height. Same "resolve one axis, derive the other" hook as text wrapping. -->
  <column align="stretch" gap="12">
    <box aspect="16/9" fill="#c9d6e5" color="#33415a" rx="8">16 : 9</box>
    <grid columns="repeat(4, 1fr)" gap="10">
      <box aspect="1" fill="#dce8d6" rx="6"/>
      <box aspect="1" fill="#f2ddd7" rx="6"/>
      <box aspect="1" fill="#e9e6f2" rx="6"/>
      <box aspect="1" fill="#e6ecf3" rx="6"/>
    </grid>
  </column>
</diagram>

Open the SVG →