Modes and fit

Each node with children has a mode. The mode tells where the children go.

Mode	The children are	Edges of the tree
`linked` (default)	around the box of the node, on one side or on a ring	yes, one to each child
`nested`	inside the box of the node. The node becomes a container.	no

Linked and nested

The mode applies to the children of one node. A linked child of a nested container is a tree inside the container. A nested child of a linked node is a container at the end of an edge.

team {
  design { ana ben }
  build { cy dee eli }
}

linked: each node is a box, and an edge goes to each child.Open in the playground →

In the text language, the words linked and nested set the mode. In the builder, grid(...) makes a linked node and grid.nested(...) makes a container. In plain objects, set mode: "nested".

The size of a container

A container is as large as its content, plus the padding and the header. Give a size to make it larger:

frame nested 300x200 { a b c }

A size is WIDTH x HEIGHT. Use _ for a free dimension: 300x_ sets only the width. In plain objects, use size: { width: 300 }.

Fit: a container with a fixed size

When the content needs more space than the size, the fit of the container decides what happens.

frame nested grow 180x90 {
  a b c d e f g h
}

grow (the default): the box is at least 180 by 90, and it grows to hold its content.Open in the playground →

grow keeps the content at its size. The size of the box is only a minimum.
scale makes the content smaller, so it fits the box. The text gets smaller too. Each box in the output has a scale, and the renderers use it for the text and the lines.
clip keeps the content at its size and gives the container clip: true. The renderers cut the content at the edge of the box. The content starts at the top-left corner of the box, so the first children stay visible.

The fit applies only to a nested container with a size. A container without a size always fits its content.

Gap, padding and header

Three options of each container set its spacing. They come from the spacing option of the layout (the default is 24), and each container can replace them.

box nested { a b c d }

The gap and the padding come from the spacing option of the layout.Open in the playground →

Option	Default	Meaning
`gap`	`spacing`	The distance between two children.
`padding`	`spacing`	The space inside the edge of a nested container.
`header`	the `header` option of the layout (24)	The smallest space above the content of a nested container. The padding counts as a part of it.

These options belong to the engine, not to a strategy. Thus each strategy has them, also a strategy that you add.

grid.nested("box", { gap: 2, padding: 30 }, "a", "b", "c", "d");

Mix the modes

org nested grid(columns: 2) {
  sales radial { north south east west }
  support nested { tier1 tier2 }
  product nested {
    web radial nested { ui api }
    mobile { ios android }
  }
  ops
}

An organization: linked rings and trees, and containers in containers, in one layout.Open in the playground →