Chapter 6 › Lesson 30

30. Use Auto Layout Wrapping

Skills: Enable wrap in auto layout settings; Set min/max width per item; Control gap between wrapped rows; Use cases: tag clouds, pill lists, responsive cards

Auto layout wrapping makes items flow to the next row when they run out of space — like tags, chips, or responsive card grids. Instead of overflowing, items wrap naturally.

30. Use Auto Layout Wrapping
Figure: Tags wrapping to new rows when container is narrow. Uses Layout: Wrap with horizontal and vertical gap settings.

Step-by-step

  1. Create a horizontal auto layout frame (press Shift + A, set direction to Horizontal)
  2. Add several small text items inside (tags or chips). Each should be Hug content with horizontal padding
  3. Select the parent frame. In Auto Layout settings, find the Layout dropdown and change it from "Packed" to Wrap
  4. Set gap: 8 for horizontal and 8 for vertical spacing between wrapped items
  5. Now resize the parent frame narrower — the items will wrap to new rows automatically
  6. Set a fixed width on the parent frame (e.g. 375px) to see the wrapping clearly
  7. Add horizontal padding: 16 to the parent frame so items don't touch the edges
  8. Try adding more items — they keep wrapping as needed
  9. Each wrapped row behaves like its own auto layout row
  10. Use cases: tags in a profile, filtering chips, responsive card grids, pill lists

Pro tip

Wrapping is only available for horizontal auto layout frames. If you want vertical wrapping, use a horizontal frame with wrap and let items flow into multiple rows — it's the same effect.