Control spacing and sizing

Use the parent frame to control spacing between its children, then size each child for the space it needs.

Before you start

Open a local page with a frame containing at least two text layers, such as the Home page in Your first website. Select its Primary frame.

Arrange a vertical stack

1. Select the containing frame in Layers and open Design.
2. Under Layout, choose Stack and set Direction to Vertical if needed. A stack arranges children in a row or column; changing the layout type must be done on Primary.
3. Set Gap to 24. This is the space between children participating in the layout.
4. In Frame padding, choose Uniform and set 32. Padding is the space between the frame edges and its content. Choose H / V for separate horizontal/vertical values or Four sides for top, right, bottom and left.
5. Select a text layer. Set its width mode to Fill and height mode to Hug. Give the parent a usable width so the text has room to wrap.
6. Replace a short sentence with a longer one, finish editing, and inspect the result. The text should wrap within its width and grow vertically.

Choose a size mode

For paragraph text, Hug width tends toward one line. Use Fixed or Fill width with Hug height when you want wrapping.

Distinguish padding from gap

Padding has four edges because it surrounds the content. A Stack's gap separates its in-flow children. A Grid can have separate row and column gaps, or use a common value for both; gap does not have a top/right/bottom/left equivalent.

For a card with more space above its heading, select the card, choose Four sides and increase Top padding. For more space between its heading and paragraph, change the parent layout's gap.

Check your result

Selecting the parent shows the gap and padding you intended. A longer paragraph fits without covering the next layer. Check smaller frames too: existing breakpoint overrides may preserve different values there.

Common problems

• Gap or padding seems ineffective: a child may use Absolute positioning. Absolutely positioned children do not contribute to the parent's Hug size, gap or padding. Use In flow where the child should participate in the layout.
• The wrong space changes: edit the parent for spacing between children; edit the child for its own dimensions.
• Hug is unavailable on a free frame: enable Stack or Grid from Primary before fitting the frame to its contents.

Related guides

• Work with breakpoints
• Create and reuse a component