Cards
Per-item stretch in a wrap line: align="stretch" makes every card fill its LINE's cross size, so cards in the same row share a height even though their bodies wrap to different lengths (the classic equal-height card grid). It only stretches items that don't pin that axis; a card's width is pinned, so only the height fills. Each row's height is the tallest card in it.
Result
Source examples/cards.svgn
<diagram width="452" padding="16" background="#eef1f4" theme="light">
<!-- Per-item stretch in a wrap line: align="stretch" makes every card fill its
LINE's cross size, so cards in the same row share a height even though their
bodies wrap to different lengths (the classic equal-height card grid). It
only stretches items that don't pin that axis; a card's width is pinned, so
only the height fills. Each row's height is the tallest card in it. -->
<row wrap="true" width="420" align="stretch" gap="12">
<contains label="Fill" width="132" padding="10" fill="#ffffff" stroke="#ccd5df">
<text width="112">Grow and stretch into definite space.</text>
</contains>
<contains label="Grid" width="132" padding="10" fill="#ffffff" stroke="#ccd5df">
<text width="112">Tracks with fr and content sizing, named areas, and line-number spans.</text>
</contains>
<contains label="Wrap" width="132" padding="10" fill="#ffffff" stroke="#ccd5df">
<text width="112">Flex lines, distributed by align-content.</text>
</contains>
<contains label="Aspect" width="132" padding="10" fill="#ffffff" stroke="#ccd5df">
<text width="112">Ratio-locked.</text>
</contains>
<contains label="Percent" width="132" padding="10" fill="#ffffff" stroke="#ccd5df">
<text width="112">A size as a share of a definite parent, tiling a row exactly.</text>
</contains>
<contains label="Text" width="132" padding="10" fill="#ffffff" stroke="#ccd5df">
<text width="112">Real wrapping.</text>
</contains>
</row>
</diagram>