Gallery

71 figures · Open a figure to explore its code.

layout (11)

geometry (10)

plotting (16)

maps (9)

networks (6)

text (5)

math (12)

api (2)

(layout_choices)

Layout choices

Three identical-width rows show three explicit allocation policies. Each row owns a definite width; its border makes unused space visible. Every rectangle uses the row's known height, but only rows two and three opt into main-axis growth.

TextBox, TextCol, and TextFrame pass the available width down through the document. The row still sets its height and its children's flex policy explicitly.

RowChild propsResult
Fixed baseswidth={px(60)}, default grow=0Two 60px rectangles, then unused space
Equal sharesgrow={1} on both unsized childrenEach gets half the space after the gap
Weighted sharesgrow={2} and grow={1} on unsized childrenA 2:1 division after the gap

A grow factor distributes extra space after bases, bounds, and gaps have been accounted for. Unsized growing children default to zero bases under the row's finite budget, making these examples simple ratios of the available space. Explicit dimensions or bases are preserved before surplus is added. Use basis="auto" to start from content measurements; see Growth bases.

This is not automatic shape filling or composite aspect inference. The parent supplies a budget and the direct children state their flex policy. For aspect-sensitive vertical stacks, a known shared width is often clearer than trying to derive it from a total height.

Try changing both grow factors in the last row to 1, or give one child a max-width to see space redistribute after its limit is reached.