Flexible containers for rows and columns in Layout

Flexible containers bring a way of working familiar from screen design into Layout by Zaweba. Instead of placing every frame by hand, you tell a frame to lay out the other frames in its group in a row or a column, and it keeps them arranged as things change.

How a flexible container works

Object > Flexible layout makes a frame into a container for the other frames in its group. It arranges them in a row or a column. The direction can be reversed, and items can wrap onto a new line when there isn't room.

You set the gaps between items and the padding inside the container. Along the line, items can be distributed to the start, centre or end, or with space between, space around or space evenly. Across the line, they can be aligned to the start, centre or end, or stretched to fill.

Items run in the order they sit in the group. The layout re-runs after every change, so add a frame, make one bigger or delete one, and the others shift to keep the arrangement.

Nesting containers

Containers can be nested. A row of product cards can be a container, and each card can be a column container holding a picture, a name and a price. Change the text on one card and that card rearranges; make the cards wider and the row rearranges.

Jobs that suit flexible layout

Product grids in a catalogue are a natural fit, especially when items are added or removed between editions. A row of logos at the foot of a poster, spaced evenly, stays even when a sponsor is added. A team page with photos and names keeps the spacing when someone joins.

Choosing settings

Space between pushes the first and last items to the ends with equal gaps between. Space around adds space at the ends too. Space evenly makes every gap the same, including the ends. Try each on a row of logos and the difference is easy to see.

Stretch across the line makes items fill the container's height in a row, or its width in a column, which is useful for equal height cards.

Wrapping suits a grid whose number of items changes, so items move onto the next line instead of squeezing.

Flexible layout pitfalls

Because items follow their order in the group, rearranging them means changing that order, not dragging them on the page.

Mixing flexible containers with careful hand placement inside the same group is confusing, since the container will move things after every change.

Nesting too deeply makes a design hard to follow. Two levels covers most needs.

It also helps to build the first item carefully before adding the rest. Get one product card exactly right, with its picture, name and price frames sized and styled, then duplicate it into the container. Every copy starts from a good design, and the container takes care of placing them, so the time goes into the one card rather than into lining up twenty.

And remember the container decides positions. If a frame won't stay where you put it, check whether it's inside a flexible layout.

Used for the right jobs, flexible containers in Layout by Zaweba take care of spacing that you would otherwise redo by hand on every revision.