Laying out a container

Anything that holds other things — a section’s content band, a box you have drawn — decides how its children are arranged. Five questions, in the order you usually ask them.

Flow

Stack	One after another, as the web does by default
Column	A column, with a gap between each
Row	A row, with a gap between each
Grid	Columns of equal width, wrapping onto more rows
Free	Children sit where they are put

Stack is the one Figma does not have, and it is right more often than anything else here — it is simply the flow, with nothing imposed on top.

Free takes every child out of the layout. They keep exactly where they were when you chose it, and from then on nothing moves around them — so they will not adapt when the page is narrower and they can overlap on a phone. It asks before doing it. Right for a composition; wrong for anything that has to hold together at every width. Choosing another flow puts them all back.

Grid is not an afterthought here. Most web layout is a grid, and a tool that treats it as the exception is prescribing something you did not ask for.

There is a shortcut worth knowing: draw two boxes side by side and the container becomes a grid on its own, with the column count following what you drew. Draw a third and it becomes three columns.

Columns, for a grid

Two to six, or Auto.

Auto is the responsive one: as many columns as fit, each at least 260px wide. Three cards become two and then one as the page narrows, and you never write a breakpoint. It is usually the right answer.

Alignment

One control, nine cells, two properties. Which property each axis drives follows the flow — horizontal is the main axis in a row and the cross axis in a column — and you do not have to know which is which.

To bring everything together in the middle, click the middle cell. That is what centring is; there is no separate button for it.

Distribute

Alignment answers where in the box. Distribution answers how the space between them is shared out, which is a different question and cannot be a position.

Packed	Held together, wherever Alignment put them
Between	Pushed to the ends, space shared between — how a header works
Around	Equal space around each one
Evenly	Equal space everywhere, edges included

Packed is not a setting of its own — it is the absence of the other three, which is why it hands the position back to Alignment rather than resetting it. Hover it and it tells you where they are being held: at the start, centred, at the end.

Choose Packed and a gap size appears; choose any of the others and it does not, because the space is already being shared out.

While one of the other three is on, Alignment shows the whole line rather than a single cell — they are spread along it, not sitting at a point on it. Clicking any cell packs them together again at that position.

Padding and margin

Both are under Spacing, four sides each, from your spacing scale — the space inside the box and the space outside it, in one place. Or use the Spacing tool (S) and drag the handles: the inner four are padding, the outer four are margin.

drag	that edge on its own
⌥	the opposing pair
⌘	all four
⇧⌘	leave the scale — an exact number, wherever you let go

Clip content

Whether anything sticking out past the edge is cut off. Off by default, because silently hiding content is rarely what anyone wants.

---

Naming a section

Adding a section asks what to call it, before anything else happens. That is not a formality: the name is the block every element inside is named from. A section called hero gives you hero__container, hero__heading, hero__box. One called section-2 gives you section-2__heading, forever.

Name it for what it is on the page rather than what it looks like today — pricing survives a redesign, blue-band does not.

Sections and their content band

A section arrives with a <div content-container> inside it. That div is what ties your content to the site’s layout — its width, its side padding — and it is what your design system already knows how to style.

It is an ordinary element: it appears in the layers panel, you can select it, style it, and delete it if you genuinely do not want it. It simply comes with the section, because nobody would think to add one.

It carries its own class as well as the attribute — hero__container for a section called hero — and that class is what your own styling goes on. The attribute is a shared mechanism; the class is yours.