Skip to main content

​
Containers & Auto-layout

Containers are the beating heart of Portals — the single feature that turns a frozen drawing into a living, editable design. Everything the AI generates is built on them, and once you feel how they behave, you’ll never draw a static layout again.

​
The idea

A container is a box that lays out its children for you. Drop shapes and text inside it, and instead of each element sitting wherever you dragged it, they arrange themselves according to rules: flow in a row or column, wrap or not, align to an edge or the center, keep a gap between items, respect padding on the inside. The magic is what happens next: resize the container and its children reflow. Pull it wider and a row of buttons spreads out; make it narrower and wrapped items drop to the next line; add text and the whole stack breathes to fit. The design doesn’t break — it adapts. That’s why generated designs survive being edited: they were built, not drawn.

​
Anatomy of a container

A container is made of the same parts, and we’ll meet each one in the Properties panel when you select it:
  • Flow (Direction) — Row lays children side by side along the main axis; Column stacks them top to bottom. This one decision shapes the whole layout.
  • Wrap — No wrap keeps everything on one line (they’ll squash rather than break); Wrap lets items flow onto the next line when they run out of room.
  • Align — where children sit on the cross axis: start, center, or end. The little alignment grid in the panel is the fastest way to feel it — click a corner and watch the children jump.
  • Distribute — how children spread along the main axis: Between pushes the first and last to the edges with equal gaps between, Around gives each item equal space on both sides, Evenly spaces everything identically.
  • Gap — the breathing room between children, in pixels.
  • Padding — the breathing room inside the container, between its edge and the first row of children.

​
Hands-on: the first container

  1. Grab the Container tool from the top-center toolbar (the two-column icon — the same icon the layers panel uses for containers, so the object has one identity everywhere).
  2. Click and drag a box out on the canvas. That’s your container — it already has Flow, Gap, and Padding set to sensible defaults.
  3. Draw a couple of rectangles and some text, then drag them inside the container. Watch the layers panel: they nest underneath it.
  4. Select the container and open the Properties panel. Flick the Direction between Row and Column and watch the children re-flow instantly. Crank the Gap and feel the spacing change live.
  5. Now resize the container by dragging a corner. The children ride along — that’s auto-layout keeping your design honest.

​
Containers vs. frames

A frame (the artboard) is a freeform canvas — a page, a poster, a slide. It has a fixed size and elements sit on it wherever you put them. A container is what lives inside frames: the structured regions that hold and arrange content. The frame is where the design happens; containers are how the design stays coherent when it changes.

​
Why this matters for AI

The vector design agent doesn’t output a picture — it outputs containers with children inside them, exactly the objects you can keep editing. When a generated design lets you drag a button, retype a headline, or change a color and everything else reflows to fit, that’s the container pipeline doing its job: nested containers, real text, real spacing — nothing flattened.