[Editor Demo] Layout Utility Matrix
Section / contained
This section keeps the narrowest wrapper. It also demonstrates row horizontalAlign=start and verticalAlign=start.
Image asset is not hydrated in this public lane yet (#208)
Row / center + center
This row demonstrates centered distribution and centered vertical alignment inside a wide section wrapper.
Center alignment proof
“Wide wrappers are useful when the page needs more horizontal breathing room without going full bleed.”
WS
Between + stretch cell B
This helps inspect how the row stretches sibling columns.
Stretch row note
Why use between?
It helps distribute columns across the available row width.
Why use stretch?
It is useful when sibling columns should share a more even vertical footprint.
Row end/end note
Use the responsive device preview in the browser or editor to inspect how stackOnMobile=false changes the layout behavior.
Spacer size notes
This page also seeds spacer sizes xs, sm, md, lg, xl, and 2xl in sequence so you can compare vertical rhythm directly on one route.
End of layout utility matrix
If you need to inspect column width tweaks further, use this page together with the older layout-recipes demo because that route still gives a calmer narrative example.
This page concentrates section, row, column, divider, and spacer options into a single layout-heavy reference route.